CODEWITHSUNDEEP
javascriptjqueryhtmlcss
cal
cal

Reputation: 1873

show certain elements in an array

I have a 6 divs (although the code should work for any number of divs). I want to show 4 divs at a time when the button #more-projects is clicked. Ideally, the the first 4 divs would be shown when the #more-projects is clicked for the first time, when it's clicked again all divs are hidden and then the next divs are shown in this case it would be 5 and 6 would be along with 1 and 2. Whenever the #more-projects is clicked the next four divs would be shown. Below is my approach but I don't know how to progress

$('#more-projects').on('click', function() {
    var projects = [];
    var shown = [];
    var start = [];

    $('.thumbnail-cnt').each(function(i) {
        projects.push($(this).data('num'));
    })
    var shown = projects.slice(0,4);
    $('[data-num="' + shown.join('"], [data-id="') + '"]').addClass('visible');

});
.thumbnail-cnt {
    display: none;
}
.visible {
    display: block;
}
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
<div class="thumbnail-cnt" data-num="1">
</div>
<div class="thumbnail-cnt" data-num="2">
</div>
<div class="thumbnail-cnt" data-num="3">
</div>
<div class="thumbnail-cnt" data-num="4">
</div>
<div class="thumbnail-cnt" data-num="5">
</div>
<div class="thumbnail-cnt" data-num="6">
</div>

<button id="more-projects">
</button>

From here I was going slice the projects to be shown, add class .visible and make a var of the index in the array that should be the starting point of the next 4 projects. But I don't know how to implement this of to cycle back to the start of the array. Any help would be appreciated.

Upvotes: 1

Views: 490

Answers (3)

Aneesh Sivaraman
Aneesh Sivaraman

Reputation: 931

Please check this code

HTML

<div id="container">
<div class="thumbnail-cnt" data-num="1">1
</div>
<div class="thumbnail-cnt" data-num="2">2
</div>
<div class="thumbnail-cnt" data-num="3">3
</div>
<div class="thumbnail-cnt" data-num="4">4
</div>
<div class="thumbnail-cnt" data-num="5">5
</div>
<div class="thumbnail-cnt" data-num="6">6
</div>
</div>
<button id="more-projects" > Next
</button>

JS

$(document).ready(function(){
   var divQueue = [];

   $("#container div").each(function(){
        divQueue.push($(this));
   });

   function showDivs(){
     $("#container").html('');
     $(".thumbnail-cnt").css("display","none");
     var i=0;
     while(i<4){
        var temp = divQueue[0];
        $("#container").append(temp[0]);
        divQueue.shift();
        divQueue.push(temp);
        i++; 
     }
   }

   showDivs();

   $("#more-projects").click(function(){
   showDivs();
   });
});

CSS

.thumbnail-cnt {
    height : 30px;
    width : 25px;
}

#more-projects {
  width : 100px;
  height : 50px;
}

Please refer Fiddle

Upvotes: 1

Milan Chheda
Milan Chheda

Reputation: 8249

Using arrays have managed to rotate the divs. Check if this is what you are looking for: 

var divs = [];
$('.thumbnail-cnt').each(function() {
  divs['' + $(this).index() + ''] = $(this).data('num');
  divs.push($(this).text());
});
divs.splice(0, 1);

$('#more-projects').on('click', function() {
  $('.thumbnail-cnt').hide();
  var count = 0;
  $(divs).each(function(k, v) {
    if (count == 4)
      return false;
    $('.thumbnail-cnt[data-num="' + v + '"]').show();
    divs.push(divs.shift());
    count++;
  });
});
.thumbnail-cnt {
  display: none;
}

.visible {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumbnail-cnt" data-num=1>Test 1</div>
<div class="thumbnail-cnt" data-num=2>Test 2</div>
<div class="thumbnail-cnt" data-num=3>Test 3</div>
<div class="thumbnail-cnt" data-num=4>Test 4</div>
<div class="thumbnail-cnt" data-num=5>Test 5</div>
<div class="thumbnail-cnt" data-num=6>Test 6</div>
<div class="thumbnail-cnt" data-num=7>Test 7</div>
<div class="thumbnail-cnt" data-num=8>Test 8</div>
<div class="thumbnail-cnt" data-num=9>Test 9</div>
<button id="more-projects">More</button>

Upvotes: 0

Viktor Jacynycz
Viktor Jacynycz

Reputation: 86

I would try to assign an id for each div, something like:

<div class="thumbnail-cnt" id="div1" data-num="1">
</div>
<div class="thumbnail-cnt" id="div2" data-num="2">
</div>
<div class="thumbnail-cnt" id="div3" data-num="3">
</div>
<div class="thumbnail-cnt" id="div4" data-num="4">
</div>
<div class="thumbnail-cnt" id="div5" data-num="5">
</div>

If you are using Jquery you can use the methods hide() and show()

If you want to show X divs:

for(var i = 1; i < X; i ++){
  $('#div'+i).show();
}    
for(var i = X; i < numDivs; i ++){
  $('#div'+i).hide();
}

Upvotes: 0

Related Questions