CODEWITHSUNDEEP
javascriptjqueryhtml
ptf
ptf

Reputation: 3370

If number of child div is > 3, hide the rest

I was wondering if anyone had a smart way of doing this:

I have some dynamically generated html, and it generates some divs based on the database.

<div class="category_items">
    <div class="category_item"></div>
    <div class="category_item"></div>
    <div class="category_item"></div>          
</div>

If this number is > 3, I need to hide those extra. When the user clicks a button, its going to show those that were hidden, and then if the user clicks again they will disappear again.

This is my current js code, which finds which divs that have to many children (it works):

    // Checks the number of items pr. category, if > 3, hide the rest of them
    var categories = $categoriesDiv.children();

    for (var i = 0; i < categories.length; ++i) {
        var localCategoryItems = $('.category_items', categories[i]);

        // Hide elements if length is > 3
        if (localCategoryItems.children().length > 3) {
            console.log('hide');
        }
    }

I just need a smart way to hide and show the extra children. Thanks!

Upvotes: 1

Views: 4487

Answers (7)

mplungjan
mplungjan

Reputation: 177960

Plain JS:

window.addEventListener("DOMContentLoaded", () => {
  document.getElementById("toggle").addEventListener("click", (e) => {
    const tgt = e.target.closest("button")
    if (!tgt.id || tgt.id != "toggle") return;
    [...document.querySelectorAll(".category_items .category_item")]
    .slice(3)
    .forEach(div => div.hidden = !div.hidden);
    tgt.textContent = tgt.textContent === "read more..." ? "read less..." : "read more...";    
  });
});
<div class="category_items">
  <div class="category_item">1</div>
  <div class="category_item">2</div>
  <div class="category_item">3</div>
  <div class="category_item" hidden>4</div>
  <div class="category_item" hidden>5</div>
</div>
<button id="toggle">read more...</button>

Upvotes: 0

Roni Soreen
Roni Soreen

Reputation: 91

Adding to the @Wallack answer the part to change the show/hide text on toggle.

$(".showhide").click(function () {
    $(".category_items div:nth-child(n+4)").toggle(function () {
        if ($(this).is(":hidden")) {
            $(".showhide").text("Show more");
        } else {
            $(".showhide").text("Show less");
        }
    });
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You can user the :gt() filter to find out children with index > 2

localCategoryItems.children(':gt(2)').hide()

Upvotes: 6

Mikhail
Mikhail

Reputation: 236

Just mark the 'extra' items with a class and toggle visibility of that items in your click handler:

for (var i = 0; i < categories.length; ++i) {
   var localCategoryItems = $('.category_items', categories[i]);

   // Hide elements if length is > 3
   if (localCategoryItems.children().length > 3) {
      localCategoryItems.find(':gt(2)').addClass('extra');
   }
}

$('#showHideButton').click(function(e) {
    $('.category_items.extra').toggle();
});

Upvotes: 0

adeneo
adeneo

Reputation: 318212

To hide elements with the class .category_items that has more than 3 children, and to toggle the visibility of those elements, you'd do something like :

var elems = $('.category_item', '.category_items').filter(function() {
                return $(this).children().length > 3;
            }).hide();

$('button').on('click', function() {
    elems.toggle();
});

FIDDLE

Upvotes: 1

Wallack
Wallack

Reputation: 792

You could use the pseudo selector nth-child this way:

.category_items div:nth-child(n+4) 
{
    display: none;
}

Example is provided here: http://jsfiddle.net/AK4c2/1/

UPDATED: the link has been updated and the jQuery could be as follows:

$(".showhide").click(function()
{
     $(".category_items div:nth-child(n+4)").toggle();
});

Upvotes: 6

GautamD31
GautamD31

Reputation: 28763

Try like

 $('.category_item:gt(2)').hide();

gt(2) will represents greaterthan 2 .It will hides the categories_items that greaterthan 3 because that count will statr from '0'

Upvotes: 2

Related Questions