Question

How can I toggle the content div on/off when I click on the ‘toggle’ text?

<div class="toggle col">TOGGLE

  <div class="content-to-toggle">
    content
  </div>
</div>

Is there a lighter version than this one:

document.addEventListener('click', function(e){
  if(e.target.className.indexOf('toggle') !== -1)
    e.target.className = e.target.className.replace(/\bexp\b|\bcol\b/, function(m){ return m == 'col' ? 'exp' : 'col'; });
});

?

Answer 1

That function has a few flaws:

1. addEventListener will fail in browsers like IE 8 and lower
2. e.target will fail in browsers like IE 8 and lower
3. indexOf('toggle') will match toggle anywhere in the class value, probablly better to use a regualr exprssion like: /(^|\s)toggle(\s|$)/
4. replace(/\bexp\b|\bcol\b/ uses word breaks as the delimiter, but class values are separated by spaces, not word breaks (like hyphen)

Lastly, what do you mean by “ligther”? Less code? Faster? Uses fewer resources?

Edit

A better version of the function would use:

1. a cross-browser method of attaching the listener (there are many generic addListener functions around)
2. a generic method of determining if the class value should be toggled (a simple hasClass function)
3. a generic method of removing one class value and adding the other (simple removeClass and addClass functions)

Also there should be a fork to say what to do if the element doesn’t have either of the classes—should it default to one or the other or do nothing?

So here’s an example:

<title>Toggling Example</title>

<style type="text/css">
  .exp {background-color: #666666;}
  .col {background-color: #bbbbbb;}
</style>

<script type="text/javascript">

// Generic container for utility functions
var util ={};

util.trim = function(s) {
  return s.replace(/(^\s+)|(\s+$)/g,'').replace(/\s+/g,' ');
}

// Generic container for DOM functions
util.dom = {};

util.dom.hasClass = function(el, cName) {
    var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)');
    return el && re.test(el.className);
};

util.dom.addClass = function(el, cName) {
    if (!util.dom.hasClass(el, cName)) {
        el.className = util.trim(el.className + ' ' + cName);
    }
};

util.dom.removeClass = function(el, cName) {
    if (util.dom.hasClass(el, cName)) {
        var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)','g');
        el.className = util.trim(el.className.replace(re, ''));
    }
}

// Generic container for DOM event functions
util.event = {};

util.event.addListener = function(el, evt, fn) {
  if (el.addEventListener) {
    el.addEventListener(evt, fn, false);
  } else if (el.attachEvent) {
    el.attachEvent('on' + evt, fn);
  }
}

function toggleClass(el, c0, c1) {

  // Replace c0 with c1
  if (util.dom.hasClass(el, c0)) {
    util.dom.removeClass(el, c0);
    util.dom.addClass(el, c1);

  // Replace c1 with c0
  } else if (util.dom.hasClass(el, c1)) {
    util.dom.removeClass(el, c1);
    util.dom.addClass(el, c0);

  // If doesn't have either class, add c0
  } else {
    util.dom.addClass(el, c0);
  }
}

// Is this "light" enough?
window.onload = function() {
  util.event.addListener(document.body, 'click', function(e) {
    var e = e || window.event;
    var el = e.target || e.srcElement;
    toggleClass(el, 'exp', 'col');
  });
}

</script>

<div>foo bar</div>

Edit 2

“Less code” is never a good reason to do anything, though it is a reasonable objective where it doesn’t obfuscate or reduce clarity. In any case, here is a “better” version of your original:

document.addEventListener('click', function(e){
   var el = e.target, cn = el.className;
   if(/(^|\s)toggle(\s|$)/.test(cn))
     el.className = cn.replace(/(^|\s)exp|col(\s|$)/, function(m){ return m == 'col' ? 'exp' : 'col';});
});

It is a bit more efficient and uses a standard delimiter for class name values.