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

Styling <CardHeader> component with React and Material UI CSS

"Permission denied to access restricted URI" error encountered while attempting to utilize ng-template functionality

An error occurred when attempting to use the getDoc() function from Firebase within Next.js: TypeError - reading 'map' on properties of undefined

The Jquery ajax get method is malfunctioning

What kind of registration does React Hook Form use?

Accessing nested objects within a JavaScript array for an Express API

What is the accurate Scrapy XPath for identifying <p> elements that are mistakenly nested within <h> tags?

Tips for inserting HTML-tagged data into a database using AJAX and PHP

Troubleshooting Tips for Resolving Problems with VueJS getElementById Bug

Issues with webpage responsiveness, width not adjusting correctly

If the FedEx function does not receive a payment, it will need to return a value of Payment Required

Reduce the number of redundant fields in MongoDB collections

Chakra UI Not Displaying Proper Responsiveness on the User Interface

Transform jQuery code to its equivalent in vanilla JavaScript

Create a duplicate of a div in jQuery while also updating its contents

What could be the reason that Vue is not evaluating anything when the directive @click is specified as "true && method"?

What is the best way to retrieve the unique identifier of dynamically created divs and showcase a message based on that identifier?

Minimize the size of the MUI date selector widget

React search filter feature with dropdown selection

React-Native Error: Invalid element type detected