Toggle current class using jquery

Question

I want to toggle .title class when we click on .title .content class toggle.Here i written this classes inside .I want to be toggle .title in a current class. I tried but not getting. Can anyone suggest me what might be the issue here?

$(document).ready(function() {
  $('.title').click(function() {
    $(this).find('.content').slideToggle();
  });
});

.content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ol class="list-timeline">
    <li>
      <h3 class="title">The Establishment</h3>
      <div class="content">
        <p>Ascetur ridiculus mus. Suspendisse pellentesque convallis massa.</p>
      </div>
    </li>
    <li>
      <h3 class="title">150 Employee</h3>
      <div class="content">
        <p>Pellentesque habitant morbi tristique senectus.</p>
      </div>
    </li>
  </ol>
</div>

.content is inside of .list-timeline, not .title, which is adjacent to it. The find method looks inside of the element you call it on, so it had no chance to find the div you wanted to have it work on. — user6019272
– user6019272, Commented Jul 27, 2018 at 6:05

Gezzasa · Accepted Answer · 2018-07-27 06:04:25Z

2

$(this).find will look for content inside of that element. $(this).parent().find will look for the content inside of the elements parent

$(this).parent().find('.content').slideToggle();

answered Jul 27, 2018 at 6:04

Gezzasa

1,4618 silver badges17 bronze badges

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

Comments

4b0 · Accepted Answer · 2018-07-27 06:05:37Z

Use parent to find class content.

$(document).ready(function() {
  $('.title').click(function() {
    $(this).parent().find('.content').slideToggle();
  });
});

.content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ol class="list-timeline">
    <li>
      <h3 class="title">The Establishment</h3>
      <div class="content">
        <p>Ascetur ridiculus mus. Suspendisse pellentesque convallis massa.</p>
      </div>
    </li>
    <li>
      <h3 class="title">150 Employee</h3>
      <div class="content">
        <p>Pellentesque habitant morbi tristique senectus.</p>
      </div>
    </li>
  </ol>
</div>

Alternative way using next:

$(document).ready(function() {
  $('.title').click(function() {
    $(this).next('div').slideToggle();
  });
});

.content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ol class="list-timeline">
    <li>
      <h3 class="title">The Establishment</h3>
      <div class="content">
        <p>Ascetur ridiculus mus. Suspendisse pellentesque convallis massa.</p>
      </div>
    </li>
    <li>
      <h3 class="title">150 Employee</h3>
      <div class="content">
        <p>Pellentesque habitant morbi tristique senectus.</p>
      </div>
    </li>
  </ol>
</div>

Rohit Verma · Accepted Answer · 2018-07-27 06:08:47Z

You were find in title tag but first you should select parent then you find which one you want to select.

I think you want like this:

$(document).ready(function() {
  $('body').on('click','.title', function() {
    $(this).parent('li').find('.content').slideToggle();
  });
});

.content {
	display:none;
}

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div class="container">
  <ol class="list-timeline">
    <li>
      <h3 class="title">The Establishment</h3>
      <div class="content">
        <p>Ascetur ridiculus mus. Suspendisse pellentesque convallis massa.</p>
      </div>
    </li>
    <li>
      <h3 class="title">150 Employee</h3>
      <div class="content">
        <p>Pellentesque habitant morbi tristique senectus.</p>
      </div>
    </li>
  </ol>
</div>

M Usman Nadeem · Accepted Answer · 2018-07-27 06:13:26Z

0

you can do this

if($('...').hasClass('content')) {
    $('...').addClass('title').removeClass('content');    
}

if($('...').hasClass('title')) {
    $('...').addClass('content').removeClass('title');    
}

answered Jul 27, 2018 at 6:13

M Usman Nadeem

4252 silver badges13 bronze badges

Comments

Akrion · Accepted Answer · 2018-07-27 06:43:53Z

0

You could also use the siblings as

$(document).ready(function() {
  $('.title').click(function(e) {
    $(this).siblings('.content').slideToggle();
  });
});

instead of going up the parent. next is also an option as mentioned already.

edited Jul 27, 2018 at 6:43

answered Jul 27, 2018 at 6:13

Akrion

18.6k1 gold badge38 silver badges58 bronze badges

Collectives™ on Stack Overflow

Toggle current class using jquery

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related