CODEWITHSUNDEEP
javascriptjqueryhtml
Rotan075
Rotan075

Reputation: 2615

Toggle only the content within given div

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

Upvotes: 2

Views: 78

Answers (6)

Harshit Malhotra
Harshit Malhotra

Reputation: 74

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();

Upvotes: 0

cнŝdk
cнŝdk

Reputation: 32145

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>

Upvotes: 1

Jenson M John
Jenson M John

Reputation: 5689

$(".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.

Upvotes: 1

V Thomas
V Thomas

Reputation: 11

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

Upvotes: 1

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

Use find() like following.

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

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337560

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

Upvotes: 2

Related Questions