Toggle more/less in a list using jquery

Question

Need somebody to run an eye over this please. Sometimes it works on jsfiddle, sometimes it doesn't! Any improvements welcome.

http://jsfiddle.net/hotdiggity/JBqB3/8/

<ul id="list">
 <li><a title="title" href="#">Lorem ipsum dolor sit amet</a>
 </li>
 <li>
  <a title="title" href="#">Consectetur adipiscing elit
  </a>
 </li>
 <li >
  <a title="title" href="#">Ipsum dolor sit amet</a>
 </li>
 <li>
  <a title="title" href="#">Lorem ipsum dolor sit amet</a>
 </li>
 <li>
  <a title="title" href="#">Ipsum dolor sit amet</a>
 </li>
</ul>

Here's the jQuery bit:

var more = $('<li><a class="more" href="">Show more</a></li>');
var less = $('<li><a class="less" href="">Show less</a></li>');

$('ul#list').children('li:gt(2)').hide();
$('ul#list').append(more);


$('.more').click(function(){
     $(this).parent().hide().siblings('li').show();
     $('ul#list').append(less);
    return false;
});

$('.less').click(function(){
     $('ul#list').children('li:gt(2)').hide();
     $('ul#list').append(more); 
    return false;
});

Why don't you use JQuery Accordion ? http://jqueryui.com/accordion/ — Vucko, Dec 14 '12 at 13:30
`$('.less').click(function(e){` won't work cos you're adding the less button in after the dom has loaded. Use on `$(document).on` or something similar. Check the jquery docs — cosmorogers, Dec 14 '12 at 13:33
`$('body').on('click','.less',function(e){` seems to work a bit better. — cosmorogers, Dec 14 '12 at 13:36
Couldn't get this to work. So far all that is "working" is: http://jsfiddle.net/hotdiggity/t38ku/4/ — hotdiggity, Dec 14 '12 at 23:52

score 0 · Answer 1 · answered Dec 14 '12 at 13:47

Check this: http://jsfiddle.net/JBqB3/17/ Another way around your problem. I'm not 100% sure if that's what you are looking for because I extracted the button off the list (I think it's a better way to have it not being a li element itself.. You can of course also use a clickable instead of that standardbutton. The html

<ul id="list">
 <li><a title="title" href="#">Lorem ipsum dolor sit amet</a>
 </li>
 <li>
  <a title="title" href="#">Consectetur adipiscing elit
  </a>
 </li>
 <li >
   <a title="title" href="#">Ipsum dolor sit amet</a>
 </li>
 <li>
  <a title="title" href="#">Lorem ipsum dolor sit amet</a>
 </li>
 <li>
  <a title="title" href="#">Ipsum dolor sit amet</a>
 </li>
</ul>
<button class="btn_more">show more</button>
<button class="btn_less">show less</button>

The css

.btn_less{
    display:none;
}

The JS

$(document).ready(function(){
    $('ul#list').children('li:gt(2)').hide();
    $('.btn_more').click(function(){
        $('ul#list').children().show();
        $('.btn_more').hide();
        $('.btn_less').show();
    });
    $('.btn_less').click(function(){
        $('ul#list').children('li:gt(2)').hide();
        $('.btn_less').hide();
        $('.btn_more').show();
    });
});

Thanks but the convenience of having the link at the end of the list was from a formatting perspective - as the list runs over three columns at various depths it's easier to have the link fall in place at the end. — hotdiggity, Dec 14 '12 at 21:33

score 0 · Answer 2 · answered Dec 15 '12 at 22:29

This appears to work

$(document).ready(function(){
    var more = $('<li class="more"><a href="">Show more</a></li>');
    var less = $('<li class="less" ><a href="">Show less</a></li>');

    $('ul#list').children('li:gt(2)').hide();
    $('ul#list').append(more);

    $('body').on('click','.more',function(e){
        e.preventDefault();
        $(this).remove();    
        $('ul#list').children().show();
        $('ul#list').append(less);
        return false;
    });

    $('body').on('click','.less',function(e){
        e.preventDefault();
        $(this).remove();
        $('ul#list').children('li:gt(2)').hide();
        $('ul#list').append(more);
        return false;
   });
});

Note that I have changed the order of the remove and hide.

The e.preventDefault(); just stops the link acting as a link, it is not 100% necessary but I like to stick it in there anyways in case the href has something other than # in it. For more info read http://api.jquery.com/event.preventDefault/

Toggle more/less in a list using jquery

2 Answers2