Is it possible to show / hide li elements wrapped in different divs?

Question

I'm making a non responsive site responsive. For the mobile view I'm trying to show 3 li elements on landing, click "show more" another 3 load and so forth. Hit show less and 3 li items should be removed.

I'm working on a project with a lot more li items but was wondering if the issue I am experiencing is a scope problem? And if there is a way to fix it.

The project I'm working on features a scrollable div displaying the li items in one div and hiding the rest until the user clicks an arrow. (this is why I havent rewritten the code from my predecessor original site is here to illustrate what I mean http://www.asla.org/sustainablelandscapes/index.html)

Is there a solution here?

I have recreated my issue (simplified) in a fiddle http://jsfiddle.net/gward90/xgmdkpb8/

EDIT: To further clarify, as seen with the fiddle all the li elements show on landing this should not be the case. Show less removes more than 3 items as well.

<div class="row">
    <div class="col-md-12">
        <ul class="thumbnails">
            <li><div class="red"></div></li>
            <li><div class="red"></div></li>
            <li><div class="red"></div></li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <ul class="thumbnails">
            <li><div class="blue"></div></li>
            <li><div class="blue"></div></li>
            <li><div class="blue"></div></li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <ul class="thumbnails">
            <li><div class="green"></div></li>
            <li><div class="green"></div></li>
            <li><div class="green"></div></li>
        </ul>
    </div>
</div>



<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>

$(document).ready(function () {
$('.thumbnails li:lt(3)').show();
$('#showLess').hide();
var items =  9;
var shown =  3;
$('#loadMore').click(function () {
    $('#showLess').show();
    shown = $('.thumbnails li:visible').size()+3;
    if(shown< items) {$('.thumbnails li:lt('+shown+')').show();}
    else {$('.thumbnails li:lt('+items+')').show();
         $('#loadMore').hide();
         }
});
$('#showLess').click(function () {
    $('.thumbnails li').not(':lt(3)').hide();
});
});

I'm not sure I understand what your issue is. The first paragraph makes sense to me. I am not sure why the other is relevant or what it means? Maybe I am just being slow... — Anders, Sep 16 '15 at 15:00
Hi @Anders, I am giving context that the actual code base I'm working on has a lot more li elements. Because the javascript isnt working and I think I wrote it correctly I am wondering if the issue I am having is because the li items are separated into 3 different divs as opposed to one. Lastly I'm explaining the reason for the 3 divs is for the scrollable plugin via desktop. Which you can see if you go to the original site. Its how my predecessor built the site, will I have to rewrite entirely to make things work properly? Hopefully I've made more sense — gwar9, Sep 16 '15 at 15:15

score 3 · Accepted Answer · answered Sep 16 '15 at 15:16

Not sure if this is what you are aiming for, but this does something at least:

var totalCount;   //Keeps track of the total number of li's, shown or hidden.
var currentCount; //Keeps track of the number of li's currently shown.

$(document).ready(function () {
    //Count how many li's there are in total.
    totalCount  = $('.thumbnails li').size();
    //Start by showing three of them.
    currentCount = 3;
    adjustLiShown();
    $('#loadMore').click(function () {
       //Increase by three and update.
       currentCount += 3;
       adjustLiShown()
    });
    $('#showLess').click(function () {
       //Decrease by three and update.
       currentCount -= 3;
       adjustLiShown()
    });
});

function adjustLiShown() {
    //Hide all and then show the one with index under total count.
    $('.thumbnails li').hide().filter(':lt(' + currentCount + ')').show();
    //Only show "load more" if we haven't reached the total yet.
    $('#loadMore').toggle(currentCount < totalCount);
    //Only show "show less" if we are above the starting number.
    $('#showLess').toggle(currentCount > 3);
}

Fiddle.

this is a great answer, is there a way to implement just for a mobile media query? I don't need a hide/show function for tablet and desktop views. — gwar9, Sep 16 '15 at 15:27
Glad it helped. Check [this](http://www.wiliam.com.au/wiliam-blog/jquery-and-css-media-queries) and [this](http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery) out for instance. If you need more help with something more specific on how to detect mobile devices I recommend you to ask a new question. — Anders, Sep 16 '15 at 15:40

score 0 · Answer 2 · answered Sep 16 '15 at 15:25

Try utilizing .slice()

$(document).ready(function () {
    $('.thumbnails li:lt(3)').show();
    // hide `.thumbnails` greater than 3
    $('.thumbnails li:gt(2)').hide();
    $('#showLess').hide();
    var items =  9;
    var shown =  3;
    $('#loadMore').click(function (e) {
        $('#showLess').show();
        $(".thumbnails li:not(:visible)").slice(0, 3)
        .show(function() {
          if ($(".thumbnails li:visible").length === items) {
            $(e.target).hide()
          }
        })
    });
    $('#showLess').click(function (e) {
        $('.thumbnails li:visible').slice(-3).hide(function() {
          if ($(".thumbnails li:visible").length === 0) {
            $(e.target).hide()
          };                
          if ($('.thumbnails li:visible').length < items) {
            $("#loadMore").show()
          }
        });
    });
});

jsfiddle http://jsfiddle.net/xgmdkpb8/6/

score 0 · Answer 3 · answered Sep 16 '15 at 15:55

Try this,

$(document).ready(function () {

  $('.row').hide();
  $('.row:eq(0)').show();

  var totalElements = $(".thumbnails li").length;
  var elementsInEachRow = 3;

  $('#loadMore').click(function () {  

    var lastVisibleElement = $(".thumbnails li").index($(".thumbnails li:visible").last()) + 1;
    var indexOfRowToHide = (lastVisibleElement / 3);

    $(".row:eq("+indexOfRowToHide+")").show();
    $('#showLess').show();

  });

  $('#showLess').click(function () {

    var lastVisibleElement = $(".thumbnails li").index($(".thumbnails li:visible").last()) + 1;
    var indexOfRowToHide = (lastVisibleElement / 3) - 1;

    $(".row:eq("+indexOfRowToHide+")").hide();
    $('#loadMore').show();

  });
});

Pen: http://codepen.io/vbrmnd/pen/ZbWEYW

Is it possible to show / hide li elements wrapped in different divs?

3 Answers3