CODEWITHSUNDEEP
javascriptjquery
JDavies
JDavies

Reputation: 2770

Selecting a div which is nested below another div

I know this is a simple thing to do but can't get my head around what I'm doing wrong. I have a h2 tag which will run a function on click, this will then locate a div with the class 'homeSlide' and then run the slideToggle method. However I can't seem to get the content to slide without making the two divs below with the same class name also slide.

Here is my HTML:

<h2>Header</h2>

<div id="home_newproducts_list">
   <div class="category-products">
      <ul class="products-grid">
         <li>Hold fetured products so will be excluded from the slideToggle</li>
      </ul>
      <div class="homeSlide">
         <!-- Content that needs to be displayed on slide -->
      </div>
   </div>
</div>

Jquery:

 jQuery(document).ready(function(){
            jQuery("#home_newproducts_list ul.products-grid").not(":first").wrapAll('<div class="homeSlide">');         
            jQuery(".home-spot h2").click(function(){
               jQuery(this).next('.homeSlide').slideToggle(1000);

            });

          });

I hope i've explained it in enough detial.

So all I want to be able to do is run the slideToggle method on the homeSlide div, but only on the next one after the h2.

Upvotes: 0

Views: 145

Answers (1)

bipen
bipen

Reputation: 36551

jQuery(".home-spot h2")

assuming you are selecting the <h2>Header</h2> element here

try with next() and find().

  jQuery(this).next().find('.homeSlide').slideToggle(1000);

next() gets the immediately following sibling which is div#home_newproducts_list in your case

Upvotes: 2

Related Questions