CODEWITHSUNDEEP
javascriptjqueryperformancethisaccordion
illibrarian
illibrarian

Reputation: 61

improving slideToggle jQuery code

I am making a collapsible set of lists. I have made it so that when a user clicks on a certain class "toggle4" they list either expands or collapses. Here is the HTML:

<div>
  <h3 class="toggle1"><a href="#">Example 1 CC</a></h3>
  <div>
    <ul>
      <li class="lib1"><a href="#">Community College</a></li>
      <li class="lib1"><a href="#">Community College - Online</a></li>
    </ul>
  </div>
  <h3 class="toggle2"><a href="#">Example 2 CC</a></h3>
  <div>
    <ul>
      <li class="lib2"><a href="#">College of Liberal Arts</a></li>
      <li class="lib2"><a href="#">College of Liberal Arts Online</a></li>
    </ul>
  </div>

Now I wonder if there is a better way to write the jquery code than just having to repeat it over and over again, as I build more lists. 

$('.lib1').hide();
$('.toggle1').click(function() {
    $('.lib1').slideToggle();
    $('html, body').animate({
        scrollTop: $(".toggle1").offset().top
    }, 2000);
});
$('.lib2').hide();
$('.toggle2').click(function() {
    $('.lib2').slideToggle();
    $('html, body').animate({
        scrollTop: $(".toggle2").offset().top
    }, 2000);
});

I thought that there was probably away to use $(this) to do it but I am not finding it.

I know I will probably have to write out the .hide() function each time.

But is there a way to consolidate the rest of the code? I may have to make up to 20-25 lists and that is going to add up to a lot of JQuery the way I'm doing it.

Thanks ahead of time.

Upvotes: 2

Views: 50

Answers (4)

Hikarunomemory
Hikarunomemory

Reputation: 4305

If the structure is the same, this might work..I think.

The height setting in the CSS is for scrollTop testing.

let $doc = $('html, body');
$('div ul li').hide();
$('h3').click(function() {
    var $this = $(this)
    $this.next().find('li').slideToggle();
    $doc.animate({
        scrollTop: $this.offset().top
    }, 2000);
});
h3 + div{
   height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h3 class="toggle1"><a href="#">Example 1 CC</a></h3>
  <div>
    <ul>
      <li class="lib1"><a href="#">Community College</a></li>
      <li class="lib1"><a href="#">Community College - Online</a></li>
    </ul>
  </div>
  <h3 class="toggle2"><a href="#">Example 2 CC</a></h3>
  <div>
    <ul>
      <li class="lib2"><a href="#">College of Liberal Arts</a></li>
      <li class="lib2"><a href="#">College of Liberal Arts Online</a></li>
    </ul>
  </div>
  </div>

Upvotes: 0

pseudoku
pseudoku

Reputation: 728

Rather than relying on specific class names under each toggle class, it might work better to

A) Have a single "toggle" class with a click function applied to each instance, but wrap it around both the h3 label and the associated list. B) Instead of calling lib1, lib2 etc, use something like $(this).find("ul"), and apply the toggle method to that, and the scrolltop: offset but to $(this).

HTML:

<div>
  <span class="toggle">
  <h3><a href="#">Example 1 CC</a></h3>
  <div>
    <ul>
      <li class="lib"><a href="#">Community College</a></li>
      <li class="lib"><a href="#">Community College - Online</a></li>
    </ul>
  </div>
  </span>
  <span class="toggle">
  <h3><a href="#">Example 2 CC</a></h3>
  <div>
    <ul>
      <li class="lib"><a href="#">College of Liberal Arts</a></li>
      <li class="lib"><a href="#">College of Liberal Arts Online</a></li>
    </ul>
  </div> 
  </span>
</div>

JS:

$('.lib').hide();
$('.toggle').click(function() {
    $(this).find('.lib').slideToggle();
    $('html, body').animate({
        scrollTop: $(this).offset().top
    }, 2000);
});

Upvotes: 1

Muhammad Usman
Muhammad Usman

Reputation: 10148

Well, this can be a revised version of the code

Just name the class of all <h3> toggle for example

Something like 

 <h3 class="toggle"><a href="#">Example 1 CC</a></h3>

Make display none of all the items you want to toggle For example

  <div style="display:none">
    <ul>
    <li class="lib1"><a href="#">Community College</a></li>
    <li class="lib1"><a href="#">Community College - Online</a></li>
   </ul>
  </div>

And finally you can use this script to toggle the display onclick event

$(this).next().slideToggle();

Here is the working snippet

$('.toggle').click(function(e) {
    $(this).next().slideToggle(600);
    
  })
.hide{
 display : none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
  <h3 class="toggle"><a href="#">Example 1 CC</a></h3>
  <div class="hide">
    <ul>
      <li class="lib1"><a href="#">Community College</a></li>
      <li class="lib1"><a href="#">Community College - Online</a></li>
    </ul>
  </div>
  <h3 class="toggle"><a href="#">Example 2 CC</a></h3>
  <div class="hide">
    <ul>
      <li class="lib2"><a href="#">College of Liberal Arts</a></li>
      <li class="lib2"><a href="#">College of Liberal Arts Online</a></li>
    </ul>
  </div>

Upvotes: 0

Bourbia Brahim
Bourbia Brahim

Reputation: 14702

You can optimize your code by :

  1. using same class for all your h3

  2. slide toggle the li container (ul) not every li,

  3. slide toggle the ul by clicking on the h3 using next() then find() , on this (current clicked h 3 item)

  4. stop annimation (when multiple click stop previous annimation )

See below snippet :

$('.lib-parent').hide();
$('.toggle').click(function() {
    
    $(this).next().find('.lib-parent').slideToggle();
    
    $('html, body').stop().animate({
        scrollTop: $(this).offset().top
    }, 2000);
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h3 class="toggle"><a href="#">Example 1 CC</a></h3>
  <div>
    <ul class="lib-parent">
      <li class="lib"><a href="#">Community College</a></li>
      <li class="lib"><a href="#">Community College - Online</a></li>
      <li class="lib"><a href="#">Community College - Online</a></li>
    </ul>
  </div>
  <h3 class="toggle"><a href="#">Example 2 CC</a></h3>
  <div>
    <ul class="lib-parent">
      <li class="lib"><a href="#">College of Liberal Arts</a></li>
      <li class="lib"><a href="#">College of  Arts Online</a></li>
      <li class="lib"><a href="#">College of Liberal Arts</a></li>
      <li class="lib"><a href="#">College of  Arts Online</a></li>
      <li class="lib"><a href="#">College of Liberal Arts</a></li>
      <li class="lib"><a href="#">College of  Arts Online</a></li>
      <li class="lib"><a href="#">College of Liberal Arts</a></li>
      <li class="lib"><a href="#">College of  Arts Online</a></li>
      <li class="lib"><a href="#">College of Liberal Arts</a></li>
      <li class="lib"><a href="#">College of  Arts Online</a></li>
      <li class="lib"><a href="#">College of Liberal Arts</a></li>
      <li class="lib"><a href="#">College of  Arts Online</a></li>
      <li class="lib"><a href="#">College of Liberal Arts</a></li>
      <li class="lib"><a href="#">College of  Arts Online</a></li>
      
    </ul>
  </div>

Upvotes: 0

Related Questions