CODEWITHSUNDEEP
javascriptjquery
kinezu
kinezu

Reputation: 1272

Generic way to only slideToggle() child div

New to jquery. I want to do a slideToggle to accordion collaps and expand a section.

When clicking the header, I want to expand/collapse everything in "#section".

<h3 id="assignments">Assignments</h3>
    <div id="section">
      Assignment Count <input type="number" name="assignment_count">
    </div>

I have the code that works below. But I want to make it generic so that if I have any header I click, it will only collapse the section below it and not all div's with an id of "#section"

$(document).ready(function(){
    $("h3").click(function(){
        $("#section").slideToggle();
    });
});

Upvotes: 1

Views: 331

Answers (3)

Rory McCrossan
Rory McCrossan

Reputation: 337666

You can use DOM traversal to achieve this. In the click handler for the h3, the next() function can be used to retrieve the following element. Try this:

$('h3').click(function() {
  $(this).next('div').slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Assignments</h3>
<div>
  Assignment Count
  <input type="number" name="assignment_count">
</div>

<h3>Foo</h3>
<div>
  Foo Count
  <input type="number" name="foo_count">
</div>

<h3>Bar</h3>
<div id="section">
  Bar Count
  <input type="number" name="bar_count">
</div>

Upvotes: 2

kavetiraviteja
kavetiraviteja

Reputation: 2208

using :header you can trigger "on" click event on any header say h1,h2,h3,h4,h5,h6..

$(document).ready(function(){
    $(":header").on('click',function(){
        $(this).nextUntil(":header").slideToggle();
    });
}); 



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1 id="assignments1">Assignment1</h1>
    <div id="section">
      Assignment Count <input type="number" name="assignment_count">
    </div>
 <h2 id="assignments2">Assignments2</h2>       
    <div id="section">
      Assignment Count <input type="number" name="assignment_count">
    </div>
 <h3 id="assignments3">Assignments3</h3>       
 <div id="section">
      Assignment Count <input type="number" name="assignment_count">
    </div>

Upvotes: 1

Dhiraj
Dhiraj

Reputation: 33628

You can use .next() which gets the immediately following sibling.

$(document).ready(function(){
    $("h3").click(function(){
        $(this).next("#section").slideToggle();
    });
});

Also, since you want to make it generic do not use IDs. Use classes instead. Something like this

<h3 class="assignments">Assignments</h3>
<div class="section">
  Assignment Count <input type="number" name="assignment_count">
</div> 

$("h3").click(function(){
  $(this).next(".section").slideToggle();
});


$("h3").click(function() {
  $(this).next(".section").slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h3 class="assignments">Assignments 1</h3>
<div class="section">
  Assignment Count
  <input type="number" name="assignment_count" />
</div>

<h3 class="assignments">Assignments 2</h3>
<div class="section">
  Assignment Count
  <input type="number" name="assignment_count" />
</div>

<h3 class="assignments">Assignments 3</h3>
<div class="section">
  Assignment Count
  <input type="number" name="assignment_count" />
</div>

<h3 class="assignments">Assignments 4</h3>
<div class="section">
  Assignment Count
  <input type="number" name="assignment_count" />
</div>

Upvotes: 1

Related Questions