Geek asks and answers

Show only the first 5 sections across multiple columns using the Show More button with jQuery

How to use jQuery to show only the first 5 times for each column and the link “more” and “less” to show more results.

What I do after seems to hide all li elements and show the first 2 and switch them to a button - BUT I need more and less links to show / hide all time intervals for each doctor (i.e. more / less links should be displayed / hidden all the time in 7 columns for each doctor with one click).

- THIS IS SUCH TIME TO NEED TO WATCH -

- THESE RESULTS WHICH I WATCH -

- MY HTML CODE -

<div class="appointmentDetails">
  <div class="staffInfo">
    <div>Dr John Doe</div>
  </div>
  <div class="appointmentInfo">
    <ul>
      <li>
        <div></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">08:00</a></div>
        <div><a href="#">09:00</a></div>
        <div><a href="#">10:00</a></div>
        <div><a href="#">11:00</a></div>
        <div><a href="#">12:00</a></div>
        <div><a href="#">13:00</a></div>
        <div><a href="#">14:00</a></div>
        <div><a href="#">15:00</a></div>
        <div><a href="#">16:00</a></div>
        <div><a href="#">17:00</a></div>
        <div><a href="#">18:00</a></div>
      </li>
      <li class="timeSlots">
        <div><a href="#">08:00</a></div>
        <div><a href="#">09:00</a></div>
        <div><a href="#">10:00</a></div>
        <div><a href="#">11:00</a></div>
        <div><a href="#">12:00</a></div>
        <div><a href="#">13:00</a></div>
        <div><a href="#">14:00</a></div>
        <div><a href="#">15:00</a></div>
        <div><a href="#">16:00</a></div>
        <div><a href="#">17:00</a></div>
        <div><a href="#">18:00</a></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">08:00</a></div>
        <div><a href="#">09:00</a></div>
        <div><a href="#">10:00</a></div>
        <div><a href="#">11:00</a></div>
        <div><a href="#">12:00</a></div>
        <div><a href="#">13:00</a></div>
        <div><a href="#">14:00</a></div>
        <div><a href="#">15:00</a></div>
        <div><a href="#">16:00</a></div>
        <div><a href="#">17:00</a></div>
        <div><a href="#">18:00</a></div>
      </li>
      <li class="timeSlots">
        <div><a href="#">08:00</a></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">09:00</a></div>
      </li>
      <li class="timeSlots">
        <div><a href="#">09:00</a></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">08:00</a></div>
      </li>
      <li>
        <div></div>
      </li>
    </ul>
  </div>
</div>
<div class="appointmentDetails">
  <div class="staffInfo">
    <div>Dr Tom Smith</div>
  </div>
  <div class="appointmentInfo">
    <ul>
      <li>
        <div></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">08:00</a></div>
        <div><a href="#">09:00</a></div>
        <div><a href="#">10:00</a></div>
        <div><a href="#">11:00</a></div>
        <div><a href="#">12:00</a></div>
        <div><a href="#">13:00</a></div>
        <div><a href="#">14:00</a></div>
        <div><a href="#">15:00</a></div>
        <div><a href="#">16:00</a></div>
        <div><a href="#">17:00</a></div>
        <div><a href="#">18:00</a></div>
      </li>
      <li class="timeSlots">
        <div><a href="#">08:00</a></div>
        <div><a href="#">09:00</a></div>
        <div><a href="#">10:00</a></div>
        <div><a href="#">11:00</a></div>
        <div><a href="#">12:00</a></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">10:00</a></div>
      </li>
      <li class="timeSlots">
        <div><a href="#">10:00</a></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">10:00</a></div>
      </li>
      <li class="timeSlots">
        <div><a href="#">10:00</a></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">10:00</a></div>
      </li>
      <li>
        <div></div>
      </li>
    </ul>
  </div>
</div>

- HERE IS THE LIVING DEMO OF MY HTML / JAVASCRIPT / CSS -

http://jsfiddle.net/rR26n/

+5
4

: http://jsfiddle.net/eqmgy/

            <div class="less"><a href="#">Less</a>
            </div>
            <div class="more"><a href="#">More</a>
            </div>

<li class="timeSlots"></li>

js:

var showMore = function () {
    $(this).find('div').css('display', 'block');

    $(this).find('.more').css('display', 'none');
    $(this).find('.less').css('display', 'block');
    $(this).find('.less').click($.proxy(showLess, $(this)));

};

var showLess = function () {
    $(this).find('div').each(function(index, div) {
        if(index > 5) {
            $(div).css('display', 'none');
        }
    });

    $(this).find('.less').css('display', 'none');
    $(this).find('.more').css('display', 'block');

    $(this).find('.more').click($.proxy(showMore, $(this)));

};

$('.timeSlots').each(function (index, timeslot) {
    $.proxy(showLess, timeslot)();
});

:

/ , , < 5:

$('.timeSlots').each(function (index, timeslot) {
            if(timeslot.find('div').length > 5) {
                 timeslot.append('<div class="more"><a href="#">More</a></div>');
                 timeslot.append('<div class="less"><a href="#">Less</a></div>');
                 $.proxy(showLess, timeslot)();
            }
});
+1

"": . , , DIV. , .

, :

<ul class="timeList">
   <li class="timeSlot">8:00</li>
   <li class="timeSlot">9:00</li>
   ...
   <li class="timeSlot">18:00</li>
</ul>

:

  • 5 , # 5 MORE.
  • # 5 LESS
  • LESS, # 5 MORE

jQuery, , , , , .

1 :

       jQuery(".someClass").children(":gt(4)").hide();

5- . : LI, , 5- . , .

, , , , :

jQuery(function () {
    jQuery(".timeList").each(function () {
        jQuery(this).children(":gt(4)").css('color','red');
    });
});

: http://jsfiddle.net/7PeVj/

# 2 , 5 MORE. , . , , 5, jQuery append(), .

. , , timeSlots

    jQuery(".timeList").each(function () {
        // reference to the list
        var theList = jQuery(this);
        // reference to it LIs that have .timeSlot
        var kids = theList.children(".timeSlot");
        // manipulate after element 5
        kids.filter(":gt(4)").css('color','red');
        //add a MORE link if we have more than 5
        if (kids.length > 5) {
            theList.append('<li class="slotMoreLess">MORE</li>');
        }
    });

: http://jsfiddle.net/7PeVj/2/

, "" MORE/LESS, . jQuery on() , .

: http://jsfiddle.net/7PeVj/4/

, , . text() MORE LESS MORE .

+1

:

$timeSlots = $('.timeSlots');
$timeSlots.each(function() {
    var $times = $(this).children();
    if ($times.length > 5) {
        $timeSlots.children(':nth-of-type(n+6)').hide();
        $(this).append('<span class="more-times">+More</span>');
    }
});

$timeSlots.on('click', '.more-times', function() {
    $(this).prevAll().show().end().remove();
});

DOMready.

http://jsfiddle.net/dfsq/rR26n/6/

0

:

http://jsfiddle.net/rR26n/8

// hide all times and then show the first 5
var hideTimes = function() {
    $('.timeSlots').each(function () {
        $(this).children('div').hide().filter(':lt(5)').show();
    });
}

// show all times
var showTimes = function() {
    $('.timeSlots > div').show();
}

$('.show').click(function () {
    showTimes();
});

$('.hide').click(function () {
    hideTimes();
});

hideTimes();

: http://jsfiddle.net/rR26n/9/

, .appointmentDetails. .

0

More articles:


All Articles