Append div 10 times each time button clicked using javascript-CodePudding

This is my code:

$(document).ready(function () {
          $('<button >View More</button>')
         .appendTo(".listing-item-container")
         .click(function() {
            $(this).closest(".listing-item-container").removeClass("collapsed");
          });
          $('<button >View Less</button>')
         .appendTo(".listing-item-container")
         .click(function() {
           $(this).closest(".listing-item-container").addClass("collapsed");
         });
      });

.listing-item-container.collapsed > :nth-of-type(n 3) {
      display:none;
    }
    
    .listing-item-container > .more {
      display:none;
    }
    .listing-item-container > .less {
      display:block;
    }
    
    .listing-item-container.collapsed > .more {
      display:block;
    }
    .listing-item-container.collapsed > .less {
      display:none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
        <div >
            <p>FEATURES</p>
            <ul >
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
            </ul>
        </div>
        <div >
            <p>FEATURES</p>
            <ul >
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
            </ul>
        </div>
        <div >
            <p>FEATURES</p>
            <ul >
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
            </ul>
        </div><div >
            <p>FEATURES</p>
            <ul >
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
            </ul>
        </div>
        <div >
            <p>FEATURES</p>
            <ul >
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
            </ul>
        </div>
        <!--  100 more listing-item divs present here   -->
    </div>

In above code when I click view more, it will display all remaining 'listing item' div and when I click view less, all divs are collapsed and display only 2 divs.

My expected output is, when I click view more it should only display next 2 'listing item' div and view more button. Again If I click view more, it should display next 2 'listing item' div and view more button. This should continue for all 100 more 'listing item' div. In the end it should display view less button. When I click view less button, each time it should collapse last 2 'listing item' div.

How can I modify my code to get the expected output?

CodePudding user response：

The key here is in the use of jquery slice() (same as javascript slice() but on a jquery collection).

var howManyItemsToShow = 2;
$(".listing-item").hide().slice(howManyItemsToShow).show();

this will hide all the items, then show the first 2. The UI update will be combined into a single action. If you add animation (.slideDown / .fadeIn) then this will need to be different.

You then add your "pagesize" (2 in the example) each time you click; and update.

Add a check for start/end and utilising the css trick to show/hide the more/less buttons gives you:

var lines = 2;
var pagesize = 2;

// assuming they don't change, load them up-front for small efficiency gain (and DRY)
var items = $(".listing-item-container .listing-item");

$(document).ready(function() {
  $('<button >View More</button>')
    .appendTo(".listing-item-container")
    .click(function() {
    
      lines  = pagesize;
      items
        .show()
        .slice(lines).hide();
        
      if (lines >= items.length)
        $(this).closest(".listing-item-container").removeClass("collapsed");
    });
  $('<button >View Less</button>')
    .appendTo(".listing-item-container")
    .click(function() {
      // same for "less" but -= and different check
      lines -= pagesize;
      items.show();
      items.slice(lines).hide();
      if (lines <= pagesize)
        $(this).closest(".listing-item-container").addClass("collapsed");
    });
});

.listing-item-container.collapsed> :nth-of-type(n 3) {
  display: none;
}

.listing-item-container>.more {
  display: none;
}

.listing-item-container>.less {
  display: block;
}

.listing-item-container.collapsed>.more {
  display: block;
}

.listing-item-container.collapsed>.less {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <p>FEATURES</p>
    <ul >
      <li>list content</li>
      <li>list content</li>
      <li>list content</li>
      <li>list content</li>
    </ul>
  </div>
  <div >
    <p>FEATURES</p>
    <ul >
      <li>list content</li>
      <li>list content</li>
      <li>list content</li>
      <li>list content</li>
    </ul>
  </div>
  <div >
    <p>FEATURES</p>
    <ul >
      <li>list content</li>
      <li>list content</li>
      <li>list content</li>
      <li>list content</li>
    </ul>
  </div>
  <div >
    <p>FEATURES</p>
    <ul >
      <li>list content</li>
      <li>list content</li>
      <li>list content</li>
      <li>list content</li>
    </ul>
  </div>
  <div >
    <p>FEATURES</p>
    <ul >
      <li>list content</li>
      <li>list content</li>
      <li>list content</li>
      <li>list content</li>
    </ul>
  </div>
  <!--  100 more listing-item divs present here   -->
</div>

CodePudding user response：

Considered the native HTML <details> element?

<details >
  <summary>
    <div >
      <p>FEATURES</p>
      <ul >
        <li>list content</li>
        <li>list content</li>
        <li>list content</li>
        <li>list content</li>
      </ul>
    </div>
  </summary>
  <div >
    <p>FEATURES</p>
    <ul >
      <li>list content</li>
      <li>list content</li>
      <li>list content</li>
      <li>list content</li>
    </ul>
  </div>
  <div >
    <p>FEATURES</p>
    <ul >
      <li>list content</li>
      <li>list content</li>
      <li>list content</li>
      <li>list content</li>
    </ul>
  </div>
  <div >
    <p>FEATURES</p>
    <ul >
      <li>list content</li>
      <li>list content</li>
      <li>list content</li>
      <li>list content</li>
    </ul>
  </div>
  <div >
    <p>FEATURES</p>
    <ul >
      <li>list content</li>
      <li>list content</li>
      <li>list content</li>
      <li>list content</li>
    </ul>
  </div>
  <!--  100 more listing-item divs present here   -->
</details>