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>
![]() |
Process manager with a reputed organization, Fond of learning new features and technology related to C#, ASP.Net, SQL Server, MVC etc.I like to help others, if I can
|
By Hamden On 30 Dec, 12 Viewed: 772 |
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
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
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
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
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