How to keep show data when I use ' Show more / hide Button ' more than once not once time in - Django & JavaScript

Question

How to keep show data when I use 'Show more / hide Button' more than once not once time in JavaScript.

My question is, how I can keep show more button work after it show all data at first time ,

I mean when user press on show more button and it show all item then he press on ' hide button' it will hide all posts right?

then user want show data again and press on show more again it must show data again why here don't do that?

I want keep show data and hide it many times not once

html page :

  {% for tech in techhome %}

  <div class="contact">
  <div class="card-deck">
  <div class="card mb-3" style="max-width: 800px;">
    <div class="row no-gutters">
      <div class="col-md-4">
        <a href="Tech/{{ tech.slug }}"><img style="height:100%;width:100%;border-radius:6.5px;" src="{{ tech.get_image }}" class="rounded float-right" alt="..."></a>
      </div>
      <div class="col-md-8">
        <div class="card-body">
          <a href="Tech/{{ tech.slug }}"> <h5 class="card-title" id="primary_site_pages_app_name_control"> <b>{{ tech.name }}</b></h5></a>
          <p class="card-text" id="font_control_for_all_pages">{{ tech.app_contect|truncatechars_html:153|safe}}</p>
        </div>
        <div class="card-footer">
         <small class="text-muted" id="date_post_control">{{ tech.post_date}}</small>
         <small class="firstsmall"><a class="bg-orange" href="{% url 'tech' %}" id="tag_name_control">مقالات تنقية</a></small>
       </div>
    </div>
  </div>
</div>
</div>
</div>

{% endfor %}


<!-- show more button -->
<div class="text-center mt-4">
<a role="presentation" type="button" class="btn btn-lg loadMore" style="width:30%;color:white;background-color:#7952b3">show more </a>
</div>

<!-- hide  -->
<div class="text-center mt-4">
   <a role="presentation" type="button" class="btn btn-lg" id="hide" style="width:30%;color:white;background-color:#7952b3"> hide 5 posts </a>
</div>
<br>



<script>
// this for show more 
const thumbnails = $(".contact");
let visibleThumbnails = 0;

function showThumbnailsUntil(index) {
for (var i = visibleThumbnails; i <= index; i++) {
 if (i < thumbnails.length) {
    $(thumbnails[i]).addClass('visible');
    visibleThumbnails++;
 } else {
   break;
 }
}
}

showThumbnailsUntil(4);

$(".loadMore").on("click",function(){
showThumbnailsUntil(visibleThumbnails + 4)

if(visibleThumbnails === thumbnails.length)
{
   $(".loadMore").fadeOut(); //this will hide
   //button when length is 0

}
}) // end show more

// hide all posts 
$("#hide").on("click", function() {
  $(".contact:nth-child(n+10)").hide("slow");
});

</script>

Answer 1

In your given code you where increment value of visibleThumbnails whenever show button was clicked but , you never decrement its value to get exact number of visible divs that's the reason its not working after some time .

In below code i have first check if the value of visibleThumbnails is greater then 5 if yes then loop through divs to hide required divs and decrement that much divs from visibleThumbnails value.

Demo Code :

 $(".contact").hide() //hide all contact div const thumbnails = $(".contact"); let visibleThumbnails = 0; function showThumbnailsUntil(index) { for (var i = visibleThumbnails; i <= index; i++) { if (i < thumbnails.length) { thumbnails.eq(i).show(); //show contact div visibleThumbnails++; } } } showThumbnailsUntil(4); $(".loadMore").on("click", function() { showThumbnailsUntil(visibleThumbnails + 5) if (visibleThumbnails === thumbnails.length) { $(".loadMore").fadeOut(); //this will hide } else { $(".loadMore").fadeIn(); //show } }) // end show more // hide all posts $("#hide").on("click", function() { //get the total visible thumnails value var hiding_ = visibleThumbnails; //check if value is > 5 if (visibleThumbnails > 5) { //loop to hide divs - 5 for (var i = hiding_; i >= (hiding_ - 5); i--) { thumbnails.eq(i).hide(); //hide visibleThumbnails--; //decrement total visible value } $(".loadMore").fadeIn(); //show more } });

 .contact { background: pink; } .card { color: white; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="contact"> <div class="card-deck"> <div class="card mb-3" style="max-width: 800px;"> Soemthing1 </div> </div> </div> <div class="contact"> <div class="card-deck"> <div class="card mb-3" style="max-width: 800px;"> Soemthing2 </div> </div> </div> <div class="contact"> <div class="card-deck"> <div class="card mb-3" style="max-width: 800px;"> Soemthing3 </div> </div> </div> <div class="contact"> <div class="card-deck"> <div class="card mb-3" style="max-width: 800px;"> Soemthing4 </div> </div> </div> <div class="contact"> <div class="card-deck"> <div class="card mb-3" style="max-width: 800px;"> Soemthing5 </div> </div> </div> <div class="contact"> <div class="card-deck"> <div class="card mb-3" style="max-width: 800px;"> Soemthing6 </div> </div> </div> <div class="contact"> <div class="card-deck"> <div class="card mb-3" style="max-width: 800px;"> Soemthing7 </div> </div> </div> <div class="contact"> <div class="card-deck"> <div class="card mb-3" style="max-width: 800px;"> Soemthing8 </div> </div> </div> <div class="contact"> <div class="card-deck"> <div class="card mb-3" style="max-width: 800px;"> Soemthing9 </div> </div> </div> <div class="contact"> <div class="card-deck"> <div class="card mb-3" style="max-width: 800px;"> Soemthing10 </div> </div> </div> <!-- show more button --> <div class="text-center mt-4"> <a role="presentation" type="button" class="btn btn-lg loadMore" style="width:30%;color:white;background-color:#7952b3">show more </a> </div> <!-- hide --> <div class="text-center mt-4"> <a role="presentation" type="button" class="btn btn-lg" id="hide" style="width:30%;color:white;background-color:#7952b3"> hide 5 posts </a> </div> <br>