Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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,

share|improve this question
add comment

1 Answer 1

up vote 2 down vote accepted

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.

share|improve this answer
    
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 '13 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. –  SPArchaeologist Jan 7 '13 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 '13 at 8:50
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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