CODEWITHSUNDEEP
jquery
user244394
user244394

Reputation: 13448

Show hide / toggle indivdualy not working

I have the following code which currently opens all when i click readmore. How can i make them open individually?

$(document).ready(function() {


    $(".readmore-content").hide();
    $(".read-more").click(function(e) {
        $(".readmore-content").toggle("slow");
       e.preventDefault();  
    });
});

HTML

<div class="result-b">
    <h4> lorem ipsum </h4>
    <p>lorem ip sum soem <a href= "#" class="read-more">Read more</a> </p>
    <div class="readmore-content">
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum
    lorem ipsum
    </div>

</div>
<div class="result-b">
    <h4> lorem ipsum </h4>
    <p>lorem ip sum soem <a href= "#" class="read-more">Read more</a> </p>
    <div class="readmore-content">
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum
    lorem ipsum
    </div>

</div>

Upvotes: 0

Views: 34

Answers (1)

AmmarCSE
AmmarCSE

Reputation: 30557

  1. Use the current element context with $(this)
  2. Navigate up to parent p element with parent()
  3. Navigate to sibling with next()

$(document).ready(function() {
  $(".readmore-content").hide();
  $(".read-more").click(function(e) {
    $(this).parent('p').next(".readmore-content").toggle("slow");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="result-b">
  <h4> lorem ipsum </h4>
  <p>lorem ip sum soem <a href="#" class="read-more">Read more</a> 
  </p>
  <div class="readmore-content">
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
  </div>

</div>
<div class="result-b">
  <h4> lorem ipsum </h4>
  <p>lorem ip sum soem <a href="#" class="read-more">Read more</a> 
  </p>
  <div class="readmore-content">
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
  </div>

</div>

Upvotes: 3

Related Questions