Question

I have this mark-up:

<div> TEXT <a class="toggle-action"> TOGGLE </a></div>
<dl class="collapsed">
  ...

</dl>
<dl class="collapsed">
  ...
</dl>

When I click on the toggle link, all the <dl> elements below should toggle their class from expanded to collapsed and back. But only the first level of DLs, because some of them might have DD elements with other DLs…

How can I do this with javascript?

I know how to do it with jQuery, but I’d like to avoid it because it adds too much load just for this thing.

Currently I have this:

document.addEventListener('click', function(e){

  // my link
  if(e.target.className.indexOf('toggle-action') !== -1){
     // here how to select DLs?
  }

});

🙂

Answer 1

refer the following link:-
http://www.daniweb.com/web-development/javascript-dhtml-ajax/code/217121/changing-the-classname

Its trying to do similar stuff like you but in js