Question

Ok fine folks of Stack Overflow, I have a question and I can’t seem to figure this out. I’ve tried for a while now, but I can’t seem to get this thing straight, and I’m hoping you can help.

Please take a look at this page:

http://ec2-50-16-99-3.compute-1.amazonaws.com/aptify/rocks/global-rocks.aspx

Notice the button towards the top of the page that says “show less info” If you click on that, this should hide two of the elements inside towards the right of each of these grey data bars, I’m calling them “rocks”.

Now, that works fine. The problem arises when I show the child “rocks” of each of these elements after I’ve already clicked on “show less info.” You can click on the “plus” button and toggle the children to see what I mean.

If you toggle the children, the elements that are supposed to hide when you click “show less info” are not hidden. But the elements who’s widths have changed ARE changed.

So the question is: if I’ve got some hidden elements by default, how do I get jQuery to hide an element that is within an element set to display: none? Is there some kind of way or method to have jQuery change the hidden elements as well so that when I toggle these new elements they are also changed?

Thanks in advance for any guidance.

SOLUTION

I got it working now, thanks to your help. Here’s my callback function (in case anyone ever runs into this issue).

$('.kpi,.edit-nav').fadeOut(200,function(){
   $(this).css('display','none');
});

Answer 1

I would toggle a class on each section.rock-accordion whenever “show more info” is clicked. Keep your animations, but giving the parent a class (or lack of that class) will allow you to control all of its children, not just the currently visible ones.