jQuery toggle list menu issue

Question

When I click on the span that is within the section, the list within only that section is supposed to be toggled. What happens though is that every list within every section is toggled, not just the one that belongs to the section that I am clicking on.

HTML:

<section class="tutorial-box">
  <p>
    <a href="#">Link #1</a>
    <br />
    Some text.
    <br />
    <span class="view-contents plus-sign">Click Here</span>
  </p>

  <ul class="tutorial-box-list">
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
  </ul>

  <div class="clear"> </div> <!-- end div class clear -->
</section> <!-- end section class tutorial-box -->

<section class="tutorial-box">
  <p>
    <a href="#">Link #2</a>
    <br />
    Some more text.
    <br />
    <span class="view-contents plus-sign">Click Here</span>
  </p>

  <ul class="tutorial-box-list">
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
  </ul>

  <div class="clear"></div> <!-- end div class clear -->

</section> <!-- end section class tutorial-box -->

CSS:

.tutorial-box{
  clear: both;
  width: 100%;
  height: auto;
  margin: 5px 0 10px 0;
  padding: 0;
}
.tutorial-box p{
  margin: 5px 0;
  padding: 0;
}
.view-contents{
  margin: 0;
  padding: 0 0 0 20px;
  cursor: pointer;
}
.plus-sign{
  margin: 0;
  padding: 0 0 0 20px;
  background: url("../images/plus-icon.png") 0 0 no-repeat;
}
.minus-sign{
  margin: 0;
  padding: 0 0 0 20px;
  background: url("../images/minus-icon.png") 0 0 no-repeat;
}

jQuery / JavaScript:

$(document).ready(function(){
  $('.tutorial-box-list').hide();
  $('.view-contents').click(function() {
    if($('.tutorial-box span').hasClass('plus-sign')) {
      $('.tutorial-box-list').slideToggle('2000');
      $('.tutorial-box span').addClass('minus-sign').removeClass('plus-sign');
    }
    else {
      $('.tutorial-box-list').slideToggle('2000');
      $('.tutorial-box span').addClass('plus-sign').removeClass('minus-sign');
    }
  });

  $('.toggle').each(function(){
    $(this).find('.toggle-content').hide();
  });
});

jsFiddle link

Any help will be appreciated.

If you are calling this ".tutorial-box-list", it will add toggle event in all the respective classes present in the page, so you need to select from the parent class and next add the required event. — stanze
– stanze, Commented Mar 18, 2015 at 6:18

Arun P Johny · Accepted Answer · 2015-03-18 06:14:26Z

1

You need to find the element relative to the clicked element so

jQuery(function ($) {
    $('.tutorial-box-list').hide();
    $('.view-contents').click(function () {
        var $this = $(this);
        $(this).closest('.tutorial-box').find('.tutorial-box-list').slideToggle('2000');
        $this.toggleClass('minus-sign plus-sign');
    });

    $('.toggle').each(function () {
        $(this).find('.toggle-content').hide();
    });
});

Demo: Fiddle

answered Mar 18, 2015 at 6:14

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Colwyn Fritze-Moor · Accepted Answer · 2015-03-18 06:15:40Z

1

Apologies considering I'm on mobile. The issue looks like every time you use $('.tutorial-box span') it uses all of those elements it finds on the page. When you want to affect just that element, use

$(this)

And it will affect only the one that was clicked. And if you want to access the parent section use

$(this).closest('.tutorial-box')

If you'd like I can spin up my laptop and create a fiddle for you.

answered Mar 18, 2015 at 6:15

Colwyn Fritze-Moor

1415 bronze badges

Comments

CJ Ramki · Accepted Answer · 2015-03-18 06:17:25Z

1

Why because you are trying to toggle class tutorial-box-list. You have assigned this class for both of the contents. So, The code toggled both contents at the same time.

Just use

$(this).parent().next().slideToggle('2000');

insetead of

$('.tutorial-box-list').slideToggle('2000');

Here is the jsfiddle Demo

edited Mar 18, 2015 at 6:17

answered Mar 18, 2015 at 6:11

CJ Ramki

2,6323 gold badges27 silver badges47 bronze badges

2 Comments

Dipak G. Over a year ago

This works. However how can I change image of the section that is clicked changing from a plus sign to a minus sign, they all change to a minus sign when clicked and vice versa.

CJ Ramki Over a year ago

@DipakG. I think .tutorial-box span and .view-contents are same selectors. So you can simply use $(this) instead of $('.tutorial-box span'). Like this $(this).addClass('minus-sign').removeClass('plus-sign');. Check this jsfiddle.net/y34d4egm/8

Bhushan Kawadkar · Accepted Answer · 2015-03-18 06:21:21Z

0

You can try below code where you can use toggleClass to add / remove 'plus-sign and minus-sign simultaneously. And use closest to get parent tutorial-box to find tutorial-box-list to toggle it.

$('.view-contents').click(function() {
      $(this).closest('.tutorial-box').find('.tutorial-box-list').slideToggle('2000');
      $(this).toggleClass('plus-sign minus-sign');
  });

JSFiddle Demo

answered Mar 18, 2015 at 6:21

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Comments

111 · Accepted Answer · 2015-03-18 06:13:46Z

0

Try this click event

$('.view-contents').click(function() {
      var section = $(this).closest('section');
      var sectionSpan =section.find('.tutorial-box span');
      var sectionList = section.find('.tutorial-box-list');
    if(sectionSpan.hasClass('plus-sign')) {
     sectionList.slideToggle('2000');
     sectionSpan.addClass('minus-sign').removeClass('plus-sign');
    }
    else {
      sectionList.slideToggle('2000');
     sectionSpan.addClass('plus-sign').removeClass('minus-sign');
    }
  });

answered Mar 18, 2015 at 6:13

111

1,7791 gold badge13 silver badges15 bronze badges

Comments

Namit · Accepted Answer · 2015-03-18 06:23:32Z

0

you can update ur js

jQuery
$(document).ready(function(){
  $('.tutorial-box-list').hide();
  $('.view-contents').click(function() {
    if($(this).hasClass('plus-sign')) {
      $(this).closest('.tutorial-box').find('.tutorial-box-list').slideToggle('2000');
      $(this).addClass('minus-sign').removeClass('plus-sign');
    }
    else {
      $(this).closest('.tutorial-box').find('.tutorial-box-list').slideToggle('2000');
      $(this).addClass('plus-sign').removeClass('minus-sign');
    }
  });

});

answered Mar 18, 2015 at 6:23

Namit

536 bronze badges

Collectives™ on Stack Overflow

jQuery toggle list menu issue

6 Answers 6

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related