Add these lines to header or footer and click on page headers to see the effect; thanks dokuwiki.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
jQuery(function(){
  jQuery('h1,h2,h3,h4,h5,h6').css('cursor','pointer').click(function(){
    var tag=this.tagName, 
        tagIdx=parseInt(tag.match(/\d/)[0],10), 
        clicknshow=jQuery(this).data('clicknshow') || false,
        fname=clicknshow?'show':'hide';
 
    jQuery(this).data('clicknshow',!clicknshow).nextAll().each(function(){
        var jqNode=jQuery(this);
        if (jqNode.is(':header')){
          var hIdx=parseInt(this.tagName.match(/\d/)[0],10);
          if (hIdx<=tagIdx) { return false; }
          jqNode.data('clicknshow',!clicknshow);
        }
        //console.log('calling '+fname+' on tag='+this.tagName+', class='+this.className);
        jqNode[fname]();
    });
  });
});
</script>

Hope you enjoy…

I was hoping for the reverse effect, so I implemented it more or less in reverse. It hides all the <DIV> text except for the heading <H1-H6> that was clicked on, then unhides it all when clicked again. Add script tags to implement as above, or copy right into user.js on vector template.

  jQuery(function () {
      jQuery('h1,h2,h3,h4,h5,h6').css('cursor', 'pointer').click(function () {
          if (jQuery(this)[0].getAttribute("DivShown") == "true") {
              jQuery(this).siblings("div").show();
              jQuery(this)[0].setAttribute("DivShown", "false");
          } else {
              jQuery(this).siblings("div").hide();
              jQuery(this).next().show();
              jQuery(this)[0].setAttribute("DivShown", "true");
          }
      });
  });

Working on 2013-05-10 “Weatherwax”

Very nice! But I don't understand how to make it hidden by default. Do you have an idea? Celano. 2013-07-03