Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 816
  • Last Modified:

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

0
bjmcd
Asked:
bjmcd
  • 2
1 Solution
 
JohnSixkillerCommented:
Hi,

something like this?

<div class="show_more" onclick='$(this.parentNode).children("div").show(); $(this).hide();'>
        <a id="more">more</a>
</div>
0
 
alien109Commented:
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!
0
 
bjmcdAuthor Commented:
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.
0
 
alien109Commented:
easy 'nuff:

$(function() {
      $(".show_more").bind("click", function() {
            var $this = $(this);
            $(".child:hidden:lt(2)", $this.parent()).slideDown(400);
            if(!$(".child:hidden", $this.parent()).length)
                  $this.slideUp(300);
      });
})
this will show in groups of 2, starting with the first matched element. When there are no more, it will then hide the show button.
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now