There have been lots of posts about this thing, still i felt like i should add one to it, so here it is :)
With the improvements in CSS styles, the Javascript programmers have found ways to do wonders to the webpages and make the content more intuitive to the end user.
One of them is to show a one line heading for some content, and display the content only when the user is further interested into it. This helps in removing the clutter from the webpage, keeps the layout clean, and increases readability. Moreover it makes the user to be more interactive with the web app.
Moreover with the advent of Ajax, the content has not to be loaded into the webpage, it can be dynamically loaded into the website and hence reducing the overall load time of the webpage and improving responsiveness.
The key lies in the
display property of any html object. This property denotes if the content be displayed on the webpage or not. We specify the property as:
style="display: none;"
Code Listing
Step 1: Add the content that you want the Show/Hide thing to display into a div and give it an id. This id is used to access the object and alter its style property. Set its diplay in style to block/none as you want.
<div id="content" style="display: none;">
The Content to Show/Hide
</div>
Step 2: Add the anchor tag which you want to be to toggle button. Clicking on this would show the content if hidden, and vice versa.
<a href="javascript:ShowHide('content');">Show/Hide</a>
Step 3: Add the following javascript to the Head of your webpage. This function would take care of showing or hiding the content inside the Show/Hide tab.
<script language="text/javascript">
function ShowHide()
{
var obj = document.getElementById(objName);
if(obj.style.display == 'block')
obj.style.display = 'none';
else if(obj.style.display == 'none')
obj.style.display = 'block';
}
</script>
Step 4: Thats all, sit back and enjoy the Show/Hide effect.
PS: The show hide effect in this webpage is not achieved in the same way, since Blogger didn't allow me to include <script> tags in the blog text.