Instantly share code, notes, and snippets.

Embed
What would you like to do?
Toggle the height of Unordered or Ordered Lists
(function($) {
$( document ).ready(function() {
var $sideNavs = $();
$.fn.toggleHeight = function( options ){
if( 'ontouchstart' in document ) return this;
$sideNavs = $sideNavs.add(this);
return this.each( function (){
var $list = $( this ),
$lis = $list.find('li').length,
defaults = {
more: "More +",
less: "Less -",
length: 4,
},
settings = $.extend( true, {}, defaults, options );
if( $lis > settings.length ){
$( 'li', $list ).eq( (settings.length - 1) ).nextAll().hide().addClass('toggleable');
$list.append('<li class="view-more"><a class="more" href="#">'+settings.more+'</a></li>');
}
$list.on( 'click', '.more', function( e ) {
var $link = $( e.currentTarget );
e.preventDefault();
if( $link.hasClass( 'less' ) ){
$link.html(settings.more).removeClass('less');
}else{
$link.html(settings.less).addClass('less');
}
$link.parent().siblings('li.toggleable').slideToggle('fast');
});
});
}
$('.link-list').toggleHeight( {length: 4} );
});
}(jQuery));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment