CODEWITHSUNDEEP
javascriptjquery
Non
Non

Reputation: 8589

How do I hide the proper panel in jQuery where there are 2 with the same class?

I am trying to hide only one panel at the time depending on the link you clicked on

Here is the html which its been generated with Handlebars

<li>
    <a class="hide-me"><h3>Enterprise</h3></a>
    <ul class="sections">
            {{#each chart-container.[0].enterprise}}
                <li>
                    <a>
                        <span>
                            <img src="{{picture}}" />
                            {{name}} <br> {{role}}
                        </span>
                    </a>
                </li>
            {{/each}}
    </ul>
  </li>

  <li>
    <a class="hide-me"><h3>Consumer</h3></a>
    <ul class="sections">
            {{#each chart-container.[1].consumer}}
                <li>
                    <a>
                        <span class="name-role" id="{{id}}">
                            <img src="{{picture}}" />
                            {{name}} <br> {{role}}
                        </span>
                    </a>
                </li>
            {{/each}}
    </ul>
  </li>

and here is the jQuery 

    $('.hide-me').on('click', function() {
      $('.sections').slideToggle();
    });

but obviously its hiding every with that class, what should I do in this case?

Upvotes: 1

Views: 31

Answers (2)

charlietfl
charlietfl

Reputation: 171669

Use next() based on html shown

$('.hide-me').on('click', function() {
      $(this).next().slideToggle();
});

Upvotes: 1

Joe Enos
Joe Enos

Reputation: 40393

You need to track down the one you're looking for. Given this structure, it would look like:

var $li = jQuery(this).closest("li"); // Gets the parent li element
var $sections = $li.find(".sections"); // Within that li, finds the sections ul
$sections.slideToggle(); // Applies directly to this element

There are probably other ways to get there - jQuery has a ton of ways of hitting the DOM - but I find this nice and clean.

EDIT

The other answers, using next, should work fine - the reason I'd avoid it is because you may manipulate the way your list looks - maybe moving the anchor to the end instead of the beginning, or throwing an image or something else in there - if you did that, your code would no longer work. My way, as long as you keep the basic structure and don't move things outside of this structure, you're all good.

Upvotes: 2

Related Questions