2

I have a list with several list items.

Each of these items have been styled through XSLT and CSS as boxes with content in them.

The Content Query Web Part is displaying this information.

When I click on a box, I want the height of the content to increase whilst reducing the height of another open item.

$(document).ready(function(){

$('.content-box').animate({height:30},"slow"); //Ensure all boxes have a height of 30px on load


$('.container').click(function(){

    $('this').find('.content-box').animate({height:180},"slow");

});

});

Now this, as expected will increase the height of the box on click. However, if I click another box, as expected, the height will also increase. I do however want the original item clicked (which is still currently open) to animate back to 30px.

Thanks,

1 Answer 1

2

Quick idea: mark the open content box by giving it a specific class. That way in the click handler you can search for the item with the old class, shrink it down, add the class to the clicked item and open it.

It would be something similar to this (semplified, I animate the whole container):

$('.container').click(function(){
var newItem = $(this);
var oldItem = $(".open");

if (newItem.attr('id') != oldItem.attr('id')) { 
  $(".open").animate({height:20},"slow");
  $(".open").removeClass("open");
  $(this).addClass("open");
  $(this).animate({height:180},"slow");
}

});

You can see it live on jfiddle here. Was this what you needed?

PS: also notice that this does not take in account an user clicking on the same open container multiple times, but you can easly handle that by checking the id of the clicked and last opened items. now it does.

3
  • SP, thank you for a rapid response! Am I correct in saying that once you click on the container, you are checking to see if the selected container has a class of "open". If it doesn't, you ensure all boxes are at their default position of 20px and then animate the selected (this) box? If so, thank you! :)
    – Tron
    Jan 4, 2013 at 17:05
  • sorry for the delay (read: weekend out). Yes, basically it is what I am doing. I search for a container with the "open" class marker and shrink it/remove the class from it if found. Then I maximize and mark the new container. I also added the check on the ID to avoid the container to be shrunk and then reopened if the user click on the same container twice.
    – SPArcheon
    Jan 7, 2013 at 7:55
  • Fantastic. thank you. I had written something very similar after I posted the question, but your adding of the ID's is a nice touch, didn't think of that!
    – Tron
    Jan 14, 2013 at 8:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.