raghavp raghavp - 4 months ago 13
CSS Question

Show jquery slide down for single instance only?

When I click share your thoughts the comments block slide down for each of its instance. What I want is that it should go down for only particular section and not all. Below is snippet of my code.
Actually I am creating all sections dynamically using php and there are almost 10-15 sections on my page and comments block is going down for each section even when i click a particular section.
So Is that possible, that only single block slide down when i click button irrespective of the number of sections my page has.



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




Answer
  1. Only activate the .card within the same section of the clicked share your thoughts element. Procedure:

    Replace

     $('.card').toggle
    

    with

    $(this).parents('section.cd-container').find('.card').toggle
    
  2. Also, to address your second concern that the sections are dynamic. If you mean the sections are loaded after page load such as using ajax then simply change the hook of your click to the container element or document and let it delegate the click. Procedure:

    Replace

    $(".down").click(function() {
    

    with

    $(".container").on("click", ".down", function() {
    
  3. I noticed that you have multiple elements with id="comments" in your HTML. This is not valid because id names for DOM elements have to be unique. I'd suggest you change it to a class and in the css change the rule for #comments to .comments

SEE WORKING EXAMPLE HERE:

$(".container").on("click", ".down", 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;

  $(this).parents('section.cd-container').find('.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>