asked on

JQuery DIV Iteration

Hi Guys and Girls,

In the code example below, when you click on the 'more' link within a parent DIV, I'd like to get JQuery to iterate through the parent DIV and display those child DIVs that are hidden. Furthermore, I'd like to work out how to get it to determine that if there are no more hidden DIVs within the parent DIV to remove the 'show_more' DIV. Any assistance is much appreciated!!

Regards,

--Brent.

<div class="grandparent">
	<div class="parent">
		<div class="child">
			<p>Some Text</p>
		</div>
		<div class="child">
			<p>Some Text</p>
		</div>
		<div class="child" style="display:none">
			<p>Some Text</p>
		</div>
		<div class="child" style="display:none">
			<p>Some Text</p>
		</div>
		<div class="child" style="display:none">
			<p>Some Text</p>
		</div>
		<div class="show_more">
			<a id="more">more</a>
		</div>
	</div>
	<div class="parent">
		<div class="child">
			<p>Some Text</p>
		</div>
		<div class="child">
			<p>Some Text</p>
		</div>
		<div class="child" style="display:none">
			<p>Some Text</p>
		</div>
		<div class="child" style="display:none">
			<p>Some Text</p>
		</div>
		<div class="child" style="display:none">
			<p>Some Text</p>
		</div>
		<div class="show_more">
			<a id="more">more</a>
		</div>
	</div>
</div>

Open in new window

JohnSixkiller

Hi,

something like this?

<div class="show_more" onclick='$(this.parentNode).children("div").show(); $(this).hide();'>
<a id="more">more</a>
</div>

alien109

You won't need to test if there are anymore hidden child elements, since once you click on the more link, all of the child elements will be displayed. So, you can just hide it after the user clicks the link. Here's a little snippet that will show the child elements that are hidden upon click, and hide the show more link.

$(function() {
      $(".show_more").bind("click", function() {
            var $this = $(this);
            $(".child:hidden", $this.parent()).slideDown(400);
            $this.slideUp(300);
      });
})

What this is doing is binding the click event to the show more links. It creates a reference to the link div that was clicked. Then it selects all elements with the .child class selector using the parent div as a context (so that we only select divs that are actually children of that parent). Then it shows each matched element through the slideDown effect. This could either be slideDown, or show, or other effect as desired. It then hides the link div with a little animation effect.

If you don't want any animation effect, simple replace slideDown(n) and slideUp(n) with show() and hide()

Hope that helps!

bjmcd

ASKER

alien109,

Excellent! Thanks for that. What if too, I only wanted to display two at a time? I'm guessing I could place a simple for loop in there?

Thanks.

--Brent.

ASKER CERTIFIED SOLUTION

alien109

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial