HTML is a markup language that, most essentially, sets the structure of a document. That structure is meaningful, and it’s often abused when web developers do a sloppy job. It’s important for accessibility, readability, and in giving a clear understanding of what is what.

With that in mind, I set out to create a page full of documentation for a new CMS we’re building with a clear structure and readability. I decided to use h2 tags as a primary content heading, with h4 tags as a primary sub-heading. However, because the CMS is so complicated, I ended up with over a dozen pages of text.

To make it useful and readable, I went about setting the h2 and h4 tags as clickable, where on-click, the sub-content is revealed. Clicking the heading again hides the sub-content.

    //On click of the heading-click class members or h4 elements, expand the following element. The sub-content of the headings are wrapped in <article> or <section> tags.
	jQuery(document).ready(function(){
	    $('.heading-click, h4').click(function() {
	        $(this).next().toggle('slow');
	        return false;
	    }).next().hide();
		
   //Go to the location shown by the hash in the URL and show the element(s) containing it.
	function goToByScroll(id){
        $('html,body').animate({scrollTop: $("#"+id).offset().top},'fast');}
        
		var hash = window.location.hash;
		$(hash).closest("section").show('fast');
		setTimeout(function(){
		      goToByScroll(hash);
		},1000);
	    
	//Display the section which is internally linked
		$('.internal').click(function(){
			var hash = $(this).attr("href");
			$(hash).closest("section").show('fast');
		});
	});