Use JavaScript to add a div element to the page ten times every time the button is clicked

Question

Use JavaScript to add a div element to the page ten times every time the button is clicked

Here is the code I have written:

$(document).ready(function () {
          $('<button class="btn more">View More</button>')
         .appendTo(".listing-item-container")
         .click(function() {
            $(this).closest(".listing-item-container").removeClass("collapsed");
          });
          $('<button class="btn less">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 class="listing-item-container collapsed">
        <div class="listing-item">
            <p>FEATURES</p>
            <ul class="no-list-style">
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
            </ul>
        </div>
        <div class="listing-item">
            <p>FEATURES</p>
            <ul class="no-list-style">
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
            </ul>
        </div>
        <div class="listing-item">
            <p>FEATURES</p>
            <ul class="no-list-style">
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
            </ul>
        </div><div class="listing-item">
            <p>FEATURES</p>
            <ul class="no-list-style">
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
            </ul>
        </div>
        <!--  Remaining listing-item divs here   -->
    </div>

In the code above, clicking on view more will expand all remaining 'listing item' divs, while clicking on view less collapses all the divs to display only 2.

I want the functionality to show only the next 2 'listing item' divs when I click view more, along with the corresponding button. This pattern should repeat for all the remaining 'listing item' divs, and end with a view less button displayed. Clicking view less should collapse the last 2 'listing item' divs each time.

What changes can I make to my code to achieve this desired output?

javascript html jquery css

Answer 1

Answer №1

The secret lies in utilizing the jquery slice() function (which is similar to javascript slice() but operates on a jquery collection).

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

This code snippet will hide all the items and then display the first 2 items. This triggers a single UI update action. If you incorporate animations like .slideDown / .fadeIn, the approach will be different.

You can increment your "pagesize" value (2 in this example) each time you click and make updates accordingly.

To control the display of more/less buttons efficiently, implement a check for start/end conditions and refer to the helpful css trick:

var lines = 2;
var pagesize = 2;

// Load them up-front assuming no changes for small efficiency gain (and DRY)
var items = $(".listing-item-container .listing-item");

$(document).ready(function() {
 $('#lt;button class="btn more">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 class="btn less">View Less</button>')
    .appendTo(".listing-item-container")
    .click(function() {
      // Similar logic for "less" with -= and different condition checks
      // Combine with "more" button for DRYness or keep separate for clarity
      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 class="listing-item-container collapsed">
  <div class="listing-item">
    <p>FEATURES</p>
    <ul class="no-list-style">
      <li>list content</li>
      <li>list content</li>
      <li>list content</li>
      <li>list content</li>
    </ul>
  </div>
  <!-- Repeat listing-item div structure multiple times -->
  <!-- Additional listing-item divs go here   -->
</div>

Answer 2

The secret lies in utilizing the jquery slice() function (which is similar to javascript slice() but operates on a jquery collection).

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

This code snippet will hide all the items and then display the first 2 items. This triggers a single UI update action. If you incorporate animations like .slideDown / .fadeIn, the approach will be different.

You can increment your "pagesize" value (2 in this example) each time you click and make updates accordingly.

To control the display of more/less buttons efficiently, implement a check for start/end conditions and refer to the helpful css trick:

var lines = 2;
var pagesize = 2;

// Load them up-front assuming no changes for small efficiency gain (and DRY)
var items = $(".listing-item-container .listing-item");

$(document).ready(function() {
 $('#lt;button class="btn more">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 class="btn less">View Less</button>')
    .appendTo(".listing-item-container")
    .click(function() {
      // Similar logic for "less" with -= and different condition checks
      // Combine with "more" button for DRYness or keep separate for clarity
      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 class="listing-item-container collapsed">
  <div class="listing-item">
    <p>FEATURES</p>
    <ul class="no-list-style">
      <li>list content</li>
      <li>list content</li>
      <li>list content</li>
      <li>list content</li>
    </ul>
  </div>
  <!-- Repeat listing-item div structure multiple times -->
  <!-- Additional listing-item divs go here   -->
</div>

Answer 3

Answer №2

I decree that it shall be done in this manner...

((parentRef='.listing-item-container', ItemsRef='.listing-item', startView=2, addView=2 )=>
 {
  const
    listItems  = document.querySelectorAll(ItemsRef)
  , btMoreLess = document.querySelector(parentRef).appendChild( document.createElement('button'))
    ;
  btMoreLess.className = 'showMore'

  var listItemsViewCount = startView -addView;

  btMoreLess.onclick =_=>
    {
    listItemsViewCount += btMoreLess.classList.contains('Less') ? -addView : +addView
    listItems.forEach( (item,i)=> item.classList.toggle('noDisplay',i>=listItemsViewCount) )

    if (listItemsViewCount >= listItems.length)  btMoreLess.classList.add('Less')
    else if (listItemsViewCount === startView)   btMoreLess.classList.remove('Less')
    }

  btMoreLess.click()  // commence
  }
)() // IIFE termination

.noDisplay{ display:none; } 
button.showMore:before { content : 'View More'; }
button.showMore.Less:before { content : 'View Less'; }

.listing-item-container   { counter-reset: itemCounter;         }
.listing-item             { counter-increment: itemCounter;     }
.listing-item > p::before { content: counter(itemCounter) '.';  }

<div class="listing-item-container">
  <div class="listing-item">
    <p>FEATURES</p>
    <ul> <li>list content</li> <li>list content</li> <li>list content</li> <li>list content</li> </ul>
  </div>
  <div class="listing-item">
    <p>FEATURES</p>
    <ul> <li>list content</li> <li>list content</li> <li>list content</li> <li>list content</li> </ul>
  </div>
  <div class="listing-item">
    <p>FEATURES</p>
    <ul> <li>list content</li> <li>list content</li> <li>list content</li> <li>list content</li> </ul>
  </div>
  <div class="listing-item">
    <p>FEATURES</p>
    <ul> <li>list content</li> <li>list content</li> <li>list content</li> <li>list content</li> </ul>
  </div>
  <div class="listing-item">
    <p>FEATURES</p>
    <ul> <li>list content</li> <li>list content</li> <li>list content</li> <li>list content</li> </ul>
  </div>
  <div class="listing-item">
    <p>FEATURES</p>
    <ul> <li>list content</li> <li>list content</li> <li>list content</li> <li>list content</li> </ul>
  </div>
  <div class="listing-item">
    <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>

Answer 4

I decree that it shall be done in this manner...

((parentRef='.listing-item-container', ItemsRef='.listing-item', startView=2, addView=2 )=>
 {
  const
    listItems  = document.querySelectorAll(ItemsRef)
  , btMoreLess = document.querySelector(parentRef).appendChild( document.createElement('button'))
    ;
  btMoreLess.className = 'showMore'

  var listItemsViewCount = startView -addView;

  btMoreLess.onclick =_=>
    {
    listItemsViewCount += btMoreLess.classList.contains('Less') ? -addView : +addView
    listItems.forEach( (item,i)=> item.classList.toggle('noDisplay',i>=listItemsViewCount) )

    if (listItemsViewCount >= listItems.length)  btMoreLess.classList.add('Less')
    else if (listItemsViewCount === startView)   btMoreLess.classList.remove('Less')
    }

  btMoreLess.click()  // commence
  }
)() // IIFE termination

.noDisplay{ display:none; } 
button.showMore:before { content : 'View More'; }
button.showMore.Less:before { content : 'View Less'; }

.listing-item-container   { counter-reset: itemCounter;         }
.listing-item             { counter-increment: itemCounter;     }
.listing-item > p::before { content: counter(itemCounter) '.';  }

<div class="listing-item-container">
  <div class="listing-item">
    <p>FEATURES</p>
    <ul> <li>list content</li> <li>list content</li> <li>list content</li> <li>list content</li> </ul>
  </div>
  <div class="listing-item">
    <p>FEATURES</p>
    <ul> <li>list content</li> <li>list content</li> <li>list content</li> <li>list content</li> </ul>
  </div>
  <div class="listing-item">
    <p>FEATURES</p>
    <ul> <li>list content</li> <li>list content</li> <li>list content</li> <li>list content</li> </ul>
  </div>
  <div class="listing-item">
    <p>FEATURES</p>
    <ul> <li>list content</li> <li>list content</li> <li>list content</li> <li>list content</li> </ul>
  </div>
  <div class="listing-item">
    <p>FEATURES</p>
    <ul> <li>list content</li> <li>list content</li> <li>list content</li> <li>list content</li> </ul>
  </div>
  <div class="listing-item">
    <p>FEATURES</p>
    <ul> <li>list content</li> <li>list content</li> <li>list content</li> <li>list content</li> </ul>
  </div>
  <div class="listing-item">
    <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>

Use JavaScript to add a div element to the page ten times every time the button is clicked

Answer №1

Answer №2

Similar questions

Chrome's spinner fails to appear when performing a synchronous ajax request in IE9

Methods for encoding and decoding special characters using either JavaScript or jQuery

What is the best way to get rid of a connect-flash notification?

Express Module Paths Failing to Function Properly

Steps for making a toggle button with Bootstrap

Fixing the reinitialization of a data table

Is there a way to adjust the transparency of a span element's background without affecting the text itself?

Ways to stop React from refreshing the page upon clicking the submit button

What is the best way to retrieve router parameters within a JSX component?

Struggling to verify credentials on CouchDB

Discover the method of connecting to a unique JavaScript trigger while utilizing IJavaScriptExecutor

Customizing the title style of the Material-UI app bar

Switching input types in Android WebView: From Numeric to Password

The middleware is causing disruptions in the configuration of redis and express

Guide to implementing personalized validation for an angular component

What are some strategies for breaking down large components in React?

Why is the Google Map missing from the Bootstrap modal dialog?

Utilizing jQuery to send an Ajax GET request for a JSON file

Adding over 20,000 rows to a table can be time-consuming, causing the page to become unresponsive once the process is complete

Convert text into a clickable link