CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Husna
Husna

Reputation: 1386

Toggle current class using jquery

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>

Upvotes: 1

Views: 108

Answers (5)

Akrion
Akrion

Reputation: 18515

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.

Upvotes: 0

M Usman Nadeem
M Usman Nadeem

Reputation: 415

you can do this

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

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

Upvotes: 0

Rohit Verma
Rohit Verma

Reputation: 3785

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>

Upvotes: 1

4b0
4b0

Reputation: 22323

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>

Upvotes: 1

Gezzasa
Gezzasa

Reputation: 1453

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

Upvotes: 2

Related Questions