Skip to content

Instantly share code, notes, and snippets.

@cramdesign

cramdesign/toggle.js

Last active August 29, 2015 14:01
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. cramdesign revised this gist Sep 29, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion toggle.js
    View file
    Original file line number Diff line number Diff line change
    @@ -28,11 +28,11 @@ EXAMPLE USAGE:
    var btn = document.getElementById('menu').getElementsByClassName('toggle')[0];
    var tgt = document.getElementById('menu').getElementsByClassName('target')[0];
    */

    var btn = document.getElementById( 'menu' );

    btn.onclick = function () {
    /* toggleClass( tgt, 'active' ); */
    toggleClass( this, 'active' );
    }
  2. cramdesign revised this gist Sep 29, 2014. 1 changed file with 7 additions and 5 deletions.
    12 changes: 7 additions & 5 deletions toggle.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,13 @@
    toggleClass = function( el, className ) {

    if ( el.classList ) {

    el.classList.toggle( className );
    }

    else {
    var classes = el.className.split( ' ' ),
    existingIndex = classes.indexOf( className );

    } else {

    var classes = el.className.split( ' ' );
    var existingIndex = classes.indexOf( className );

    if (existingIndex >= 0) {
    classes.splice( existingIndex, 1 );
    @@ -15,6 +16,7 @@ toggleClass = function( el, className ) {
    }

    el.className = classes.join( ' ' );

    }

    };
  3. cramdesign revised this gist Sep 29, 2014. 1 changed file with 2 additions and 3 deletions.
    5 changes: 2 additions & 3 deletions toggle.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,13 +5,12 @@ toggleClass = function( el, className ) {
    }

    else {
    var classes = el.className.split( ' ' ),
    var classes = el.className.split( ' ' ),
    existingIndex = classes.indexOf( className );

    if (existingIndex >= 0) {
    classes.splice( existingIndex, 1 );
    }
    else {
    } else {
    classes.push( className );
    }

  4. cramdesign revised this gist Sep 29, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion toggle.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    var toggleClass = function( el, className ) {
    toggleClass = function( el, className ) {

    if ( el.classList ) {
    el.classList.toggle( className );
  5. cramdesign created this gist May 18, 2014.
    37 changes: 37 additions & 0 deletions toggle.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    var toggleClass = function( el, className ) {

    if ( el.classList ) {
    el.classList.toggle( className );
    }

    else {
    var classes = el.className.split( ' ' ),
    existingIndex = classes.indexOf( className );

    if (existingIndex >= 0) {
    classes.splice( existingIndex, 1 );
    }
    else {
    classes.push( className );
    }

    el.className = classes.join( ' ' );
    }

    };


    /*
    EXAMPLE USAGE:
    var btn = document.getElementById('menu').getElementsByClassName('toggle')[0];
    var tgt = document.getElementById('menu').getElementsByClassName('target')[0];
    */

    var btn = document.getElementById( 'menu' );

    btn.onclick = function () {
    /* toggleClass( tgt, 'active' ); */
    toggleClass( this, 'active' );
    }