Skip to content

Instantly share code, notes, and snippets.

@dboutote

dboutote/list-height-toggle.js

Created January 13, 2018 23:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dboutote/e1fa1efcaeac3d651de0b329a75bc0af to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dboutote/e1fa1efcaeac3d651de0b329a75bc0af to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. dboutote created this gist Jan 13, 2018.
    50 changes: 50 additions & 0 deletions list-height-toggle.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,50 @@
    (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));