Whenever I click on the "Share your thoughts" button, the comments block slides down for every section instead of just the particular section I clicked on. Is there a way to make it so that only a single block slides down when the button is clicked, regardless of how many sections are on the page? Below is a snippet of my code. I am dynamically creating all the sections using PHP, resulting in 10-15 sections on the page. However, when I click on a specific section's button, the comments block slides down for every section. Is it possible to adjust the code so that only one block slides down at a time?
$('.down').click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: 'up' };
// Set the duration (default: 400 milliseconds)
var duration = 700;
$('.card').toggle(effect, options, duration);
});#comments{
background-color: #535d92;
display: none;
height:60px;
}
#slide {
width: 90%;
margin-top: 14px;
margin-left: 14px;
z-index:1;
border: none;
border-radius: 2.5em;
background: #fff;
-webkit-appearance: none;
outline:none;
padding: 0.85em 1.5em;
height:10%;
}
.cd-container {
width: 90%;
margin: 0 auto;
}
.post-footer ul {list-style:none}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div class="container">
<section class="cd-container">
<div class="cd-timeline-content">
<h3>raghav</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<div class="post-footer">
<ul>
<li class="down"><a href="#">Share your thoughts</a></li>
</ul>
</div>
</div><br/>
<div id="comments" class="card">
<input type="text" id="slide" placeholder="Hit Enter to Send!" class="boom"/>
</div>
</section> <!-- cd-timeline --><br>
<section class="cd-container">
<div class="cd-timeline-content">
<h3>sharad</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<div class="post-footer">
<ul>
<li class="down"><a href="#">Share your thoughts</a></li>
</ul>
</div>
</div><br/>
<div id="comments" class="card">
<input type="text" id="slide" placeholder="Hit Enter to Send!" class="boom"/>
</div>
</section>
</div>