Click to Hide/Show Content - jQuery

This is a simple but effective way to present text to users. Instead of large amounts of scrolling to find what your looking for, this hides information, making other area more visible and making the page more presentable. Find out how:

HTML

To make this function work, there needs to be an action and a target. The action can be anything that a user might click to read more. This general is the title or some text labeled "read more". In this case, the action is a linked word. The linked word will need a class to link into the jQuery. CLASS can be used multiple times within a page. There is no limit on how many links can be used to hide or show content.

The target area is where all the hide/show content will reside. DIV tags are great targets. Also, always use ID instead of CLASS because this DIV needs to be unique, otherwise anything with the same class name will also be hidden.

<p>
<a class="more1" href="#"> Read more </a>
</p>
<div id="content1">
<h1> Content </h1>
</div>

jQuery

This simple code needs to be placed in the of the page. Note that the class and id shown above are also present in this code. These must match for the function to work.

$(document).ready(function() {
  $('.more1').click(function() {
    $('#content1').toggle();
  });
});

CSS

Lastly, make sure that the hide/show content is hidden when the page loads. Simply add the code below to the CSS.

#content {
  display:none;
}

This is not limited to divs or links. This can be used to change anything that uses display:none;.