Skip to content

Instantly share code, notes, and snippets.

@macu

macu/toggle-demo.html

Created December 8, 2016 15:36
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. macu renamed this gist Dec 8, 2016. 1 changed file with 0 additions and 0 deletions.
    0 demo.html → toggle-demo.html
    View file
    File renamed without changes.
  2. macu created this gist Dec 8, 2016.
    7 changes: 7 additions & 0 deletions demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    <a data-toggle=".demo-layout .demo-target" href="#">[-]</a>

    <div class="demo-layout">
    <div class="demo-target">
    <p>Content hidden or displayed</p>
    </div>
    </div>
    36 changes: 36 additions & 0 deletions toggle.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    // support [-] and [+] toggle
    $('a[data-toggle]')
    .on('click', function(e) {
    e.preventDefault();
    var targetSelector = $(this).attr('data-toggle');
    var $target = $(targetSelector);
    if ($target.length) {
    $target.toggle();
    $(this).trigger('after-toggle');
    }
    })
    .on('after-toggle', function() {
    var targetSelector = $(this).attr('data-toggle');
    var $target = $(targetSelector);
    $(this).text('[' + ($target.is(':visible') ? '-' : '+') + ']');
    if ($target.length && window.localStorage && window.localStorage.setItem) {
    // save toggle state
    window.localStorage.setItem(targetSelector, $target.is(':visible') ? 'visible' : 'hidden');
    }
    })
    .each(function() {
    var targetSelector = $(this).attr('data-toggle');
    var $target = $(targetSelector);
    if ($target.length && window.localStorage && window.localStorage.getItem) {
    // restore saved toggle state
    switch (window.localStorage.getItem(targetSelector)) {
    case 'visible':
    $target.show();
    break;
    case 'hidden':
    $target.hide();
    break;
    }
    $(this).trigger('after-toggle');
    }
    });