Use JavaScript to hide and show text and graphics

You can show and hide the content to get attention of the user on a web page. it's a very useful thing for web designer and web developers. You can use JavaScript and CSS to achieve it. I am going to show some examples of it.

There are many libraries available on internet having the feature to hide and show different section of page but usually they carry heavy files to download which may slow down your page. You can use them if you have any complicated situation which can be achieved only by those libraries, unless you can use these short tricks.

It is easy let's do this in just three steps

Create a Div and put some content in it and give id to this Div, set it's style to display:none to hide the div by default

<div id="divhidden" style="display:none;">I have some hidden content</div>

Create a link and put following JavaScript in it.

<a href='javascript:;' 
   onclick="javascript:document.getElementById('divhidden').style.display = 'block';">
      Show content
</a>

Create an other link to hide the content again

<a href='javascript:;' 
   onclick="javascript:document.getElementById('divhidden').style.display = 'none';">
      Show content again
</a>

In this example we use text to show and hide but you can use any type of elements like image.

How to change the content of hidden div, let's change it

<a href="javascript:;" 
 onClick="javascript:document.getElementById('divhidden').innerHTML='new html goes here';">
   Update the HTML
</a> 

Other blogs you may like

A handy tutorial on creating Page Load Progress Bar using Pace.js

A website isn't complete without the inclusion of all the right elements. Progress bar is one of the key components of every website. It informs the user about the total waiting time for a particular web page or a specific task to load. Apart from adding value to the website, the progress bar is... By Celin Smith   On 18 Feb 2015  Viewed: 4,955

JavaScript isNaN function and usage

In JavaScript we have a function isNan (Not a number) to check whether the value is a number or not. It takes only one parameter, value and returns true or false, we will check here some values and conditions to understand it better. It supports in all browsers. isNaN(123); // false --... By Jason Olivera   On 30 Mar 2013  Viewed: 528

JavaScript Array: Create, Aceess and Methods

ArrayList and JavaScript, How to declare and store an ArrayList inside JavaScript, create an array in javascript, add item to javascript array, delete an item in an array in javascript, find an item in an array in javascript, these are the very basic question which most of the new developer... By Hamden   On 30 Dec 2012  Viewed: 828

JavaScript getAttribute() Method

In JavaScript getAttribute() method is used to get the value of an attribute in an object. **Syntax:** object.getAttribute(attributename) **Parameter:** It takes only one parameter *attributename* **Example:** Suppose you have an anchor tag with following attributes <a... By Alicia Gonzalez   On 02 Dec 2012  Viewed: 695

How to retrieve data from database using JavaScript in asp.net

I was checking how to validate a user email from database without post back, using JavaScript. After some search and RND found the way to call the web service method with the help of Ajax and JavaScript. Let’s say we have a registration page on which we accept email from the user and we expect... By Ali Adravi   On 24 Jun 2012  Viewed: 14,569