Add a "Show Less" button to InstafeedJS

Question

Using InstafeedJS, I want to be able to add a button that hides whatever content has been loaded after the initial feed (e.g. the user has clicked Show More one or more times). My initial idea is to add a class or data tag to the additional feed items, then hide them with a custom button. But I'm not sure how to add these references through the script. Any ideas?

Current code:

      var loadButton = document.getElementById('instafeed-loadmore');

      var feed = new Instafeed({
          get: 'user',
          type: 'image',
          limit: '5',
          sortBy: 'most-recent',
          resolution: 'standard_resolution',
          userId: <?php echo $instagram_id; ?>,
          accessToken: '<?php echo $instagram_token; ?>',
          template: '<li><span class="instagram-post" data-url="{{link}}" data-modal="instagram-popup" data-caption="{{caption}}" data-image="{{image}}" style="background-image: url({{image}});"></span></li>',
          after: function() {
              if (!this.hasNext()) {
                  loadButton.setAttribute('disabled', 'disabled');
              }
          }
      });

      loadButton.addEventListener('click', function() {
          feed.next();
      });

      feed.run();

Answer 1

You can add references through the script or add custom data attribute on loaded elements (there are more than one way to achieve what you want) but in my opinion you can use CSS selector to select all elements loaded after initial feed and apply some style (hide) them as shown in the code snippet below.

var limit = 4;
var feed = new Instafeed({
  target: 'instafeed',
  get: 'user',
  type: 'image',
  sortBy: 'most-recent',
  limit: limit,
  resolution: 'standard_resolution',
  userId: <?php echo $instagram_id; ?>,
  accessToken: '<?php echo $instagram_token; ?>',
  template: '<img class="instagram-post" src={{image}} />',
  after: function() {
    if (!this.hasNext()) {
      $('#btnMore').attr('disabled', 'disabled');
    }
  }
});

$('#btnMore').on('click', function(e) {
  $(".instagram-post:nth-child(n+" + (1 + limit) + ")").show();
  feed.next();
});

$('#btnLess').on('click', function(e) {
  $(".instagram-post:nth-child(n+" + (1 + limit) + ")").hide();
});

feed.run();

.instagram-post {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 15px;
}

<div id="instafeed"></div>

<button id="btnMore">Load More...</button>
<button id="btnLess">Show Less...</button>

Modify the code as per your need.

Exaplanation:

In the click event handler of $('#btnLess') I'm selecting all images with class .instagram-post from index limit + 1 and hiding them.

In the click event handler of $('#btnMore') I'm making sure all of the available images in the feed are visible so that whenever I press it after pressing $('#btnLess') all previously loaded images in the feed are visible as well.

Hope it helps.

Answer 2

While Dipen's answer is great, as you don't seem to be using jQuery, here it is in standard Js

var limit = 4;
var feed = new Instafeed({
  target: 'instafeed',
  get: 'user',
  type: 'image',
  sortBy: 'most-recent',
  limit: limit,
  resolution: 'standard_resolution',
  userId: <?php echo $instagram_id; ?>,
  accessToken: '<?php echo $instagram_token; ?>',
  template: '<img class="instagram-post" src={{image}} />',
  after: function() {
    if (!this.hasNext()) {
      document.getElementById('btnMore').attr('disabled', 'disabled');
    }
  }
});

document.getElementById('btnMore').on('click', function(e) {
  document.getElementsByClassName("instagram-post:nth-child(n+" + (1 + limit) + ")").show();
  feed.next();
});

document.getElementById('btnLess').on('click', function(e) {
  document.getElementsByClassName("instagram-post:nth-child(n+" + (1 + limit) + ")").hide();
});

feed.run();

(P.S. As I only de "JQueryified" it for you accept his as the answer, not mine.)