Show/Hide divs with same class - jquery

Posted by phil on Stack Overflow See other posts from Stack Overflow or by phil
Published on 2010-06-01T16:33:42Z Indexed on 2010/06/01 16:43 UTC
Read the original article Hit count: 158

Filed under:

Hello,

I have 1 div that will contain 3-5 divs with the same class. Below the div is an anchor. I would like for when this anchor is clicked it will hide the first div and then show the second. Another click would show the next and so on. I have set display:none on all divs but the first so only one is currently showing. I just can't figure out how to hide the first and then show the second, then third, then next when clicking the anchor.

<div class="container-div">
<div class="inner-div">...</div>
<div class="inner-div" style="display:none;">...</div>
<div class="inner-div" style="display:none;">...</div>
<a href="#" class="more">More</a>
</div>

So when the more anchor is clicked it would show one inner-div one at a time. Any suggestions or ideas would be greatly appreciated. Also, I would like to use jquery to accomplish this.

© Stack Overflow or respective owner

Related posts about jQuery