Clash Royale CLAN TAG

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?

.title

.content

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

.list-timeline

.title

find

3 Answers
3

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

$(this).find

$(this).parent().find

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

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

Use parent to find class content.

parent

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:

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>

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>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.