SharePoint - jQuery - Click a box to increase height and reduce other open boxes

Question

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,

Answer 1

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.