Toggle only the content within given div

Question

I got a question regarding using the toggle function after a button press. I have the following jQuery code:

$(function () {
    $('.navigation').click(function () {                                
        $(".expand, .collapse").toggle();
    });
});

This works perfect together with the following HTML:

<div class="container">
  <div class="title">
      <div class="navigation">
        <span class="expand">
          expand          
        </span>
        <span class="collapse">
          collapse          
        </span>
      </div>
  </div>
</div>

But whenever I have this HTML format:

<div class="container">
  <div class="title">
      <div class="navigation">
        <span class="expand">
          expand          
        </span>
        <span class="collapse">
          collapse          
        </span>
      </div>
  </div>
</div>

<div class="container">
  <div class="title">
      <div class="navigation">
        <span class="expand">
          expand          
        </span>
        <span class="collapse">
          collapse          
        </span>
      </div>
  </div>
</div>

The toggle is applied to both containers, which is logical but not desired. How could I trigger only the siblings of the pressed navigation button?

I tried something like:

$(this).next(".expand, .collapse").toggle();

but that does not work. Any help is appreciated!

DEMO HERE

score 2 · Accepted Answer · answered May 02 '16 at 12:02

2

You've got the right idea; you need to use the this keyword to reference the element which raised the event and find it's related .expand and .collapse elements, however next() looks for siblings, whereas the elements you need to retrieve are children so you need to use find():

$(function () {
    $('.navigation').click(function () {                                
        $(this).find(".expand, .collapse").toggle();
    });
});

Updated fiddle

answered May 02 '16 at 12:02

Rory McCrossan

331,213
40
305
339

Thank you for your fast and clear answer! This really helped me. I thought I was close but your explanation makes everything clear. Thank you! – Rotan075 May 02 '16 at 12:18

score 2 · Answer 2 · answered May 02 '16 at 12:03

2

Use find() like following.

$(this).find(".expand, .collapse").toggle();

answered May 02 '16 at 12:03

Ibrahim Khan

20,616
7
42
55

score 1 · Answer 3 · answered May 02 '16 at 12:09

You're almost there! find() is your friend. When coupled with $(this), it will search through child nodes that match your criteria.

$(function () {
            $('.navigation').click(function () {                                
                $(this).find(".expand, .collapse").toggle();
            });
});

JSFiddle

score 1 · Answer 4 · edited May 23 '17 at 12:16

1

$(".expand, .collapse").toggle(); this would apply toggle to all elements with classes expand and collapse irrespective of your clicked .navigation div.

Change to

  $(this).find(".expand, .collapse").toggle();

You may read about $(this) here.

edited May 23 '17 at 12:16

Community

1
1

answered May 02 '16 at 12:10

Jenson M John

5,499
5
30
46

cнŝdk · Answer 5 · 2016-05-02T12:24:04.077

You have to specify the container div of these classes, you can simply use $(".expand, .collapse", $(this)):

$(function() {
  $('.navigation').click(function() {
    $(".expand, .collapse", $(this)).toggle();
  });
});

.navigation {
  min-width: 30px;
  min-height: 20px;
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="title">
    <div class="navigation">
      <span class="expand">
          expand          
        </span>
      <span class="collapse">
          collapse          
        </span>
    </div>
  </div>
</div>

<div class="container">
  <div class="title">
    <div class="navigation">
      <span class="expand">
          expand          
        </span>
      <span class="collapse">
          collapse          
        </span>
    </div>
  </div>
</div>

score 0 · Answer 6 · edited May 02 '16 at 14:54

0

Hey tried to research on your question and got this useful link https://api.jquery.com/siblings/. You can use it as follows:

$(this).siblings(".expand, .collapse").toggle();

edited May 02 '16 at 14:54

Rory McCrossan

331,213
40
305
339

answered May 02 '16 at 12:10

Harshit Malhotra

74
4

Note that this won't work as `siblings()` gets sibling elemens, yet `.collapse` and `.expand` are children. – Rory McCrossan May 02 '16 at 14:54

Toggle only the content within given div

6 Answers6