Add class to single div per click

I’m new in programming.

I have multiple sibling divs with the same class and a view more button. I want to add class to the div on the view more button click, but one by one. So the first sibling-div will be visible and view more button. When a user clicks on the button the second sibling-div should be visible, then on clicking again the third sibling-div should be visible and so on.

I don’t have access to html so i used jQuery to add the view more button.

I have used CSS to hide all the sibling divs by default. Only the first div, view-more-btn button and when there’s active class they will be visible.

I’ve tried to add class using jQuery but it adds to all the divs.

This is the html

<div class="parent-div">
  <div class="sibling-div">
    /*content*/
  </div>
  <div class="sibling-div">
    /*content*/
  </div>
  <div class="sibling-div">
    /*content*/
  </div>
  <div class="sibling-div">
    /*content*/
  </div>
  <div class="sibling-div view-more">
    <a class="view-more-btn">View More</a>
  </div>
</div>

This is my CSS

.parent-div .sibling-div{
  display: none;
}
.parent-div .sibling-div:first-child, .parent-div .sibling-div.active, .parent-div .sibling-div.view-more{
  display: block;
}

This is my jQuery

$(document).ready(function(){
  var view_more = '<div class="sibling-div view-more"><a class="view-more-btn">View more</a></div>';
  $(".parent-div .sibling-div:last-child").after(view_more);
  $(".parent-div .view-more-btn").click(function(){
    /*Adds class to all sibling divs*/
    $(".parent-div .sibling-div").addClass("active");
    /*Also tried*/
    $(".parent-div .sibling-div:first-child").next().addClass("active");
    /*But it only adds class to the second sibling*/
    /*Also tried using loop*/
    var div_length = $(".parent-div .sibling-div").length();
    for(i=0; i <= div_length; i++){
      $(".parent-div .sibling-div").addClass("active");
    }
  });
});

I’ve tried all this methods but it doesn’t work the way I want. It adds class to all the sibling-div, or just the second sibling-div

Answer

You can access the next hidden element in the group with

$(".parent-div .sibling-div:hidden:first")

:hidden targets elements with no opacity or display:none. :first is a jQuery selector that targets the first item of the match.

$(document).ready(function() {
  $('.parent-div').append('<div class="" view-more"><a class="view-more-btn" href="#">View more</a></div>');
  $(".parent-div .view-more-btn").click(function() {
    $(".parent-div .sibling-div:hidden:first").addClass("active");
  });
});

.parent-div .sibling-div {
  display: none;
}

.parent-div .sibling-div:first-child,
.parent-div .sibling-div.active,
.parent-div .sibling-div.view-more {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent-div">
  <div class="sibling-div">
    /*content*/
  </div>
  <div class="sibling-div">
    /*content*/
  </div>
  <div class="sibling-div">
    /*content*/
  </div>
  <div class="sibling-div">
    /*content*/
  </div>

</div>

Advertisement

Answer