Generic toggler

a-toggler.js

$(function() {
  // multi-toggler
  var toggleItems = function(opts) {
    var options = {
      wrapper: 'wrapper', // id
      toggler: 'toggler', // id
      togglerOn: 'toggler-on',  // class for toggler on state
      togglerOff: 'toggler-off', // class for toggler off state
      items: 'toggle-item', // class that will hide/show element(s)
      classShow: 'toggle-show', // class applied to shown elements
      classHide: 'toggle-hide'  // class applied to hidden elements
    };
    // override default options with user supplied options
    for( var attrname in options ) {
      options[attrname] = opts[attrname] || options[attrname];
    }
    // get elements ('w' for wrapper, 't' for toggle, 'b' for button)
    var w = document.getElementById(options.wrapper);
    // only do this check if 'w' is found in the page
    if (w !== null) {
      var t = w.getElementsByClassName(options.items);
    }
    var b = document.getElementById(options.toggler);
    // on event handler
    var on = function(to, type, fn) {
      if (document.addEventListener) {
        to.addEventListener(type, fn, false);
      } else if (document.attachEvent) {
        to.attachEvent("on" + type, fn);
      } else {
        to["on" + type] = fn;
      }
    };
    // has class helper
    var hasClass = function(el, cl) {
      if (el.classList.contains(cl)) {
        return true;
      } else {
        return false;
      }
    };
    // only do this if toggler id is found in the page
    if (w !== null) {
      // the toggle button
      on(b, 'click', function(e) {
        e.preventDefault();
        // toggle answers
        for (var i = 0 ; i < t.length; i++) {
          if (hasClass(t[i], options.classShow)) {
            t[i].classList.remove(options.classShow);
            t[i].classList.add(options.classHide);
          } else if (hasClass(t[i], options.classHide)) {
            t[i].classList.remove(options.classHide);
            t[i].classList.add(options.classShow);
          }
        }
        // toggle toggler state
        if (hasClass(b, options.togglerOn)) {
          b.classList.remove(options.togglerOn);
          b.classList.add(options.togglerOff);
        } else if (hasClass(b, options.togglerOff)) {
          b.classList.remove(options.togglerOff);
          b.classList.add(options.togglerOn);
        }
      });
    }
  };
  // toggle answer
  toggleItems({
    wrapper: 'quiz-page-answer',
    toggler: 'quiz-page-answer-toggler'
  });
  // toggle more quizzes
  toggleItems({
    wrapper: 'quiz-posts',
    toggler: 'quiz-posts-toggler'
  });
});

b-toggler.html

<a id="toggler" class="toggler-off" href="#"></a>
<duv class="wrapper">
  <div class="toggle-item toggle-show">1 + 1 = ?</div>
  <div class="toggle-item toggle-hide">2</div>
</duv>

c-toggler.scss

#toggler {
  &.toggler-off:after {
    content: "Show answer";
  }
  &.toggler-on:after {
    content: "Hide answer";
  }
}
.toggle-show {
  display: block;
}
.toggle-hide {
  display: none;
}

d-toggler.md

A generic toggler handler that will toggle visibility of one or more elements marked with the class toggle-item. These elements should have their initial visibility state represented by the classes toggle-hide and toggle-show.

The toggle trigger element toggler will also show a text based on its state.

wrapper establishes the scope of the toggling. When the class toggle-item is present outside the wrapper, nothing will happen. This is useful when one wants to use more than one toggleItems() in the same window.

One can use several toggleItems() on the same page as long as one passes different options to it, like so:

// toggle answer
toggleItems({
  wrapper: 'quiz-page-answer',
  toggler: 'quiz-page-answer-toggler'
});
// toggle more quizzes
toggleItems({
  wrapper: 'quiz-posts',
  toggler: 'quiz-posts-toggler'
});