Switch list items with more than a quantity of 3

Question

Switch list items with more than a quantity of 3

I have a set of unordered list items that I want to display only the first 3 li elements for each when loading. Upon clicking the + sign, the remaining list items should toggle visibility for just that specific list group. While this can potentially be achieved with CSS alone, I am currently working on implementing it using jQuery.

Here is how I have set it up:

HTML

<div class="container">
<div class="col-lg-3">
  <div class="toggle" tabindex="1">
    <p class="header" onclick="void(0)">LINK</p>
    <ul>
      <li>link 1</li>
      <li>link 2</li>
      <li>link 3</li>
      <li>link 4</li>
      <li>link 5</li>
      <li>link 6</li>
    </ul>
  </div>
</div>

<div class="col-lg-3">
  <div class="toggle" tabindex="1">
    <p class="header" onclick="void(0)">LINK</p>
    <ul>
      <li>link 1</li>
      <li>link 2</li>
      <li>link 3</li>
      <li>link 4</li>
      <li>link 5</li>
      <li>link 6</li>
    </ul>
  </div>
</div>

<div class="col-lg-3">
  <div class="toggle" tabindex="1">
    <p class="header" onclick="void(0)">LINK</p>
    <ul>
      <li>link 1</li>
      <li>link 2</li>
      <li>link 3</li>
      <li>link 4</li>
      <li>link 5</li>
      <li>link 6</li>
    </ul>
  </div>
</div>
</div>

jQuery

$('ul li').hide().filter(':lt(3)').show();
$('ul').append('<li>+</li>').find('li:last').click(function() {
  $(this).siblings(':gt(2)').toggle();
});

JSFIDDLE: LINK

jquery css

Answer 1

Answer №1

To modify the initial line of jQuery, you can simply do the following:

$('ul').each(function() {
  $('li:gt(2)', this).hide()
});

Check out this jsFiddle demo

$('ul').each(function() {
  $('li:gt(2)', this).hide()
});
$('ul').append('<li>+</li>').find('li:last').click(function() {
  $(this).siblings(':gt(2)').toggle();
});

ul li {
  list-style-type: none;
}

.container {
  display: flex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="container">
  <div class="col-lg-3">
    <div class="toggle" tabindex="1">
      <p class="header" onclick="void(0)">CLICK HERE</p>
      <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
        <li>item 6</li>
      </ul>
    </div>
  </div>

  <div class="col-lg-3">
    <div class="toggle" tabindex="1">
      <p class="header" onclick="void(0)">CLICK HERE</p>
      <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
        <li>item 6</li>
      </ul>
    </div>
  </div>

  <div class="col-lg-3">
    <div class="toggle" tabindex="1">
      <p class="header" onclick="void(0)">CLICK HERE</p>
      <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
        <li>item 6</li>
      </ul>
    </div>
  </div>
</div>

Answer 2

To modify the initial line of jQuery, you can simply do the following:

$('ul').each(function() {
  $('li:gt(2)', this).hide()
});

Check out this jsFiddle demo

$('ul').each(function() {
  $('li:gt(2)', this).hide()
});
$('ul').append('<li>+</li>').find('li:last').click(function() {
  $(this).siblings(':gt(2)').toggle();
});

ul li {
  list-style-type: none;
}

.container {
  display: flex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="container">
  <div class="col-lg-3">
    <div class="toggle" tabindex="1">
      <p class="header" onclick="void(0)">CLICK HERE</p>
      <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
        <li>item 6</li>
      </ul>
    </div>
  </div>

  <div class="col-lg-3">
    <div class="toggle" tabindex="1">
      <p class="header" onclick="void(0)">CLICK HERE</p>
      <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
        <li>item 6</li>
      </ul>
    </div>
  </div>

  <div class="col-lg-3">
    <div class="toggle" tabindex="1">
      <p class="header" onclick="void(0)">CLICK HERE</p>
      <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
        <li>item 6</li>
      </ul>
    </div>
  </div>
</div>

Answer 3

Answer №2

The selection of elements using the :gt() selector is limited to the first 3 li elements within the initial ul.

To achieve a similar effect, here are two alternative methods:

Method 1: Using CSS :nth-child() pseudo-class with :not() to exclude the last element in the list:

ul li:nth-child(n+4):not(:last-child) {
  display: none;
}

Method 2: With jQuery, utilizing the :nth-child() pseudo-class selector.

$('ul li:nth-child(n+4)').hide();

You can also implement your custom toggling functionality like this:

$('ul li:nth-child(n+4)').hide();
$('ul').append('<li>+</li>').find('li:last').click(function() {
  $(this).siblings(':gt(2)').toggle();
});

ul li {
  list-style-type: none;
}

.container {
  display: flex;
}

Answer 4

The selection of elements using the :gt() selector is limited to the first 3 li elements within the initial ul.

To achieve a similar effect, here are two alternative methods:

Method 1: Using CSS :nth-child() pseudo-class with :not() to exclude the last element in the list:

ul li:nth-child(n+4):not(:last-child) {
  display: none;
}

Method 2: With jQuery, utilizing the :nth-child() pseudo-class selector.

$('ul li:nth-child(n+4)').hide();

You can also implement your custom toggling functionality like this:

$('ul li:nth-child(n+4)').hide();
$('ul').append('<li>+</li>').find('li:last').click(function() {
  $(this).siblings(':gt(2)').toggle();
});

ul li {
  list-style-type: none;
}

.container {
  display: flex;
}

Answer 5

Answer №3

$('ul').each(function(){
  $(this).find('li').hide().filter(':lt(3)').show();
});

Give this a try!

Answer 6

$('ul').each(function(){
  $(this).find('li').hide().filter(':lt(3)').show();
});

Give this a try!

Switch list items with more than a quantity of 3

Answer №1

Answer №2

Answer №3

Similar questions

When clicked, the menu disappears successfully with the "show" functionality, but unfortunately, the "hide" feature is not working as intended

What could be causing my content to unexpectedly break out of its designated div structure?

Is it possible to use Highcharts in AngularJs without jQuery?

Implementing a clickable image using an anchor tag in JavaScript

Do AJAX-inserted elements cause a delay in the loading of the DOM? How is the loading of the DOM determined

We'll show you the steps to properly organize a set of radio buttons created dynamically within a 'controlgroup' using jQuery Mobile

Is there a way to send the id to the print page within the ajax success function?

It appears that Javascript variables are behaving in a static manner

Checking if an array exists after parsing JSON using jQuery

JavaScript drop-down menu malfunctioning

Attention: Vanishing within specified time limit

The issue of Jquery not functioning properly within Ajax-included HTML documents

The functionality of AngularJs' scope.apply appears to interfere with the autocomplete feature of jQuery UI

Making <div> elements responsive by rearranging their display order using CSS in media queries, troubleshooting issues with floats, and adjusting font sizes

Set a unique class for several elements depending on a given condition

Issues encountered with JavaScript when trying to use the jQuery API

<v-time-picker> - issue with time selection

Revamp your Redux Form with a fresh new 'Field' label style

Utilizing HTML's multiple input type color feature to save selected colors directly to the database

What is the fastest way to add an email subscription form to my website without needing to configure a database?