Usando jQuery para alternar divs y divs ocultos

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.

Por favor, eche un vistazo a esta página:

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?

Gracias de antemano por cualquier orientación.


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


preguntado el 01 de febrero de 12 a las 22:02

2 Respuestas

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.

Respondido 02 Feb 12, 03:02

Yeah, I think that is going to be my best bet. The only thing I'm apprehensive about is losing the fadeIn/fadeOut animations. But of course that's a better option than having it look ridiculous when you toggle the children. - Jeremy Miller

I think you can preserve the animations by toggling the class in the fadeIn/fadeOut callback. - skybondsor

@skybondsor is right, you must use callbacks to ensure all your content is shown correctly before and after. - Ben Carey

yeah, I should have thought of that. Thanks again. - Jeremy Miller

Yes there is it is called toggle() here is a link to its description

Respondido 02 Feb 12, 03:02

Yeah, I understand toggle. In fact, I'm using it on the example. Have you had a chance to take a look at the page? It toggles the widths on a hidden element fine, but it doesn't set the element to display: none on elements inside of a hidden div. The question is "how do I make it do that?" - Jeremy Miller

$("#someId").css('display', 'none');- is this enough - Hristo Petev

Apply a callback function and set it in there using the css method - Ben Carey

Well the .css('display','none') would work ok, but if you look at the example I showed, I'm already using a toggle function with .fadeIn(); y la .fadeOut(); which basically is an animation of .css('display','none); That doesn't work. - Jeremy Miller

Personally I like to handle all of it myself so instead of using toggle() with fadein/out(), I just use animate() and use callbacks. This gives me a lot more control of what happens. Nice looking site by the way, are you using a UI or library? Or did you design these graphics? - Ben Carey

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.