Sunday, May 1, 2011

Hide or show div element

Want to learn how to hide div element on your HTML page with javascript? Or how to dynamically show div element? You are on right place. Here you will find simple tutorial, demo and code how to toggle (hide or show) <div> element with its content. With help of javascript div visibility is dynamically changed.

More article and samples how to hide or show HTML element find on Show and hide with javascript summary.
If you are interested in some other fancy javascript effects follow the link.

Demo for hiding and showing div element:

SHOW/HIDE <-- press here




Here is the sample HTML and Javascript code:


<script language="javascript">
    function showOrHide() 
    {
        var div = document.getElementById("showOrHideDiv");
        if (div.style.display == "block") 
        {
            div.style.display = "none";
        }
        else 
        {
            div.style.display = "block";
        }
    } 
</script>
 
<a href="javascript:showOrHide();">show/hide</a>
<div id="showOrHideDiv" style="display: none"><h4>Hello</h4></div>



    What is happening in the code:

  • When user click SHOW/HIDE link javascript showOrHide() function is called

  • Method showOrHide() checks the value of the display style for the div showOrHideDiv

  • If the display style of div is none (div is not visible) function will set div style to block - so the div will become visible

  • If the display style of div is block (div is visible) function will set div style to none - so the div will be hidden

Demo for div element containing other HTML elements

The <div> tag is often used to group block-elements. You can put any HTML element inside div tag. In this example we put some text and two input HTML element. When user click link both textboxes are hided or showed.


SHOW/HIDE <-- press here


This is a code:

 
<script language="javascript">
    function showOrHide() 
    {
        var div = document.getElementById("showOrHideDiv");
        if (div.style.display == "block") 
        {
            div.style.display = "none";
        }
        else 
        {
            div.style.display = "block";
        }
    }

</script>
<br/>
<a href="javascript:showOrHide();"><b>SHOW/HIDE</b></a> <-- press here
<br/><br/>
<div id="showOrHideDiv" style="display: none">
First name: <input type="text" name="FirstName" value="Donald" /><br />
Last name: <input type="text" name="LastName" value="Duck" /><br />
</div>


Purpose of this example is to demonstrate that in div tag can be many various HTML elements. So, when you hide div tag you hide all HTML element this div tag is contain. Same thing count for showing div.

If you want to change text of your link to Show or Hide when div tag is showed or hided take a look at change link text with javascript.

Demo of one javascript function for hiding various div elements

show/hide Div A   show/hide Div B

Div A

 

Div B

 

Here is a code of reusable javascript function divHideShow for hide div elements. This function can be called from various places. The input parameter in function divHideShow is id of <div> tag you want to hide or show.


<script language="javascript">

    function divHideShow(divToHideOrShow) 
    {
        var div = document.getElementById(divToHideOrShow);
        if (div.style.display == "block") {
            div.style.display = "none";
        }
        else {
            div.style.display = "block";
        }
    }
    
</script>
 

    <table style="width: 28%; height: 54px;">
        <tr>
            <td>
                <a href="javascript:divHideShow('divA');">hide DivA</a>
                </td>
            <td>
                <a href="javascript:divHideShow('divB');">hide DivB</a></td>
        </tr>
        <tr>
            <td>
                <div id="divA" style="display: block"><h4>Div A</h4></div></td>
            <td>
                <div id="divB" style="display: block"><h4>Div B</h4></div></td>
        </tr>
    </table>

In above code example same jscript function divHideShow(divToHideOrShow) is called from show/hide Div A link and from show/hide Div B.

One more thing, if you need here you can find instructions how to place two div elements in one line side by side.


13 comments:

subins2000 said...

Thank you bro. I implemented this technique on my blog. See it
http://pfogb.blogspot.com

Mark said...

To SUBIN:
I take a look at your site but didn't find where you implement hide or show div element.

subins2000 said...

At the top right of the blog.

Mark said...

To SUBIN:
Yes, I found it.

subins2000 said...

How is my blog ?

Mark said...

To SUBIN:
It's OK. I think you should add a short description of flash game on main page instead just a title.

Anonymous said...

Hmmm...

No one is telling me how to connect the Java Script to the html. I can't get it to expand the text but it is hiding it so not a complete fail for me. Can you explain how I get the java to run? or what I should call the script file so it will call to action.

Thanks :)

Anonymous said...

Hi there, how can i make the text link (SHOW/HIDE) disappear when i click on it?

Mark said...

Yes, you can click the link and then the link will disappear.
You can use first demo in this article.
Just put the show/hide link inside div inside div with id showOrHideDiv.

<script language="javascript">
function showOrHide() {
var div = document.getElementById("showOrHideDiv");
if (div.style.display == "block") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
}
</script>

<div id="showOrHideDiv" style="display: block"><a href="javascript:showOrHide();">show/hide</a></div>

But careful, when you once hide content with a link you can't show it again unless you refresh page.

zafar said...

Dear friend very useful post about show/hide text in the articles area. Thank you.

tonychapman said...

I put one hidden div on my web page and it works great - click it and it opens , click again and it closes. But when I put more on the same page they don't work. they seem to all open the top one. Is there in easy answer to this please? I am not an expert at this stuff. thanks.

LA Dave said...

I would very much like to know the answer to tonychapman's question.

Anonymous said...

Thank you ! Finally found a show/hide script that will work in Blogspot !