CODEWITHSUNDEEP
jquerytoggleshow-hide
jamjam
jamjam

Reputation: 3269

Whats the best way to implement a "Show More" button with jQuery?

After echoing a list of results from PHP/Mysql.

I want to display the results to the user in a managible way.

Example :

<ul>
<li data-pet="cat"><a href="/black-cat">Black Cat<a></li>
<li data-pet="cat"><a href="/grey-cat">Grey Cat<a></li>
<li data-pet="cat"><a href="/red-cat">Red Cat<a></li>
<li data-pet="dog"><a href="/dog-cat">White Dog<a></li>
</ul>

If a "pet" has more than 1 result I will like to only display the first one and have "Show More" button that will reveal/toggle the rest of the results.

I think using the data attribute is the best way to group/hide similar results.

I am really stuck, please Help.

Upvotes: 0

Views: 1547

Answers (4)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Edit: Updated code based on your comment,

Add show more link in your html like below,

<ul>
  <li data-pet="cat"><a href="/black-cat">Black Cat<a></li>
  <li data-pet="cat"><a href="/grey-cat">Grey Cat<a></li>
  <li data-pet="cat"><a href="/red-cat">Red Cat<a></li>
  <li class="shPets" data-pet="cat">Show More..</li>
  <li data-pet="dog"><a href="/dog-cat">White Dog<a></li>
  <li data-pet="dog"><a href="/dog-cat">Black Dog<a></li>
  <li data-pet="dog"><a href="/dog-cat">Grey Dog<a></li>  
  <li class="shPets" data-pet="dog">Show More..</li>  
  <li data-pet="fish"><a href="/dog-cat">Grey fish<a></li>
</ul>

The above can be done by script, but it is much much better and easier if you have it in your HTML.

DEMO

var $li = $('ul li');
var $shPets = $('.shPets');

$shPets.each (function () {
    var petType = $(this).data('pet');
    $('ul li[data-pet='+petType+']')
        .not('.shPets') //not shPets
        .not(':first')  //everything except first
        .hide();
});

$('.shPets').click (function () {
    var petType = $(this).data('pet');
    if ($(this).text() == 'Show More..') {
        $(this).text('Hide');
        $('ul li[data-pet='+petType+']').show();
    } else {
        $(this).text('Show More..');
        $('ul li[data-pet='+petType+']')
          .not('.shPets') //not shPets
          .not(':first')  //everything except first
          .hide();
    }
});

You can hide everything except first and then toggle them on click of show/hide text. See below,

DEMO

var $ul = $('ul');
var $li_not_first = $('ul li').not(':first').hide();

$ul.append('<li class="shPets">Show More..</li>');

$('.shPets').click (function () {
    if ($(this).text() == 'Show More..') {
        $(this).text('Hide');
        $li_not_first.toggle();
    } else {
        $(this).text('Show More');
        $li_not_first.toggle();
    }
});

Upvotes: 1

rd42
rd42

Reputation: 3594

You could use get() to grab the number of li elements and if the are more than 3 you could use hide(), fadeIn(), or a selection of other jquery techniques to display your show more link. The show more could be in a span with an id so you could hide it

get() link

if ($('li').get() => 3) { $(#showMore).fadeIn() }

<ul>
<li data-pet="cat"><a href="/black-cat">Black Cat<a></li>
<li data-pet="cat"><a href="/grey-cat">Grey Cat<a></li>
<li data-pet="cat"><a href="/red-cat">Red Cat<a></li>
<li data-pet="dog"><a href="/dog-cat">White Dog<a></li>
</ul>
<span id="showMore">Show more... </span>

I'll see if I can get a fiddle working

Upvotes: 0

SpYk3HH
SpYk3HH

Reputation: 22570

See a fiddle here of something like that, though you'll still need to implement the data (the elements) yourself, prolly via $.ajax

HTML

<ul>
    <li data-pet="cat"><a href="javascript:void(0)">Black Cat</a><span>Show More</span></li>
    <li data-pet="cat"><a href="javascript:void(0)">Grey Cat</a></li>
    <li data-pet="cat"><a href="javascript:void(0)">Red Cat</a></li>
    <li data-pet="dog"><a href="javascript:void(0)">White Dog</a></li>
</ul>​

jQuery Javascript

$("ul > li:first-child span").on('click', function(e) {
    $(this).parent().nextAll().toggle();
})​

CSS

ul > li:not(:first-child) {
    display: none;
}
span {
    background-color: #ffa;
    cursor: pointer;
    margin: 0 .5em;
    padding: 0 .5em;
    color: #aaf;
}​

Upvotes: 1

Sandeep Rajoria
Sandeep Rajoria

Reputation: 1239

$('ul > li').hide();

$('ul').children().eq(0).show();

$('ul').append('<button class="close_button">Show More</button>');

$('.close_button').on('click', function(){
    $('ul > li').each(function(){ 
        $(this).slideDown();
    })
})

Upvotes: 1

Related Questions