How to hide, show, or toggle your div


Are you trying to find a way to hide and show your content? The demo below shows a simple yet elegant way of toggling your content and toggling the control text via Javascript and styling.

Here is a more reusable and flexible toggle function that takes 2 parameters: one for the div to hide/show and a second parameter for the div that contains the link text to be switched.

 

Demo
Let’s use images!

This demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.

 

Here is the HTML code:

<div id="headerDivImg">
    <div id="titleTextImg">Let's use images!</div>
    <a id="imageDivLink" href="javascript:toggle5('contentDivImg', 'imageDivLink');"><img src="MiNUS IMAGE Source "></a>
</div>
<div id="contentDivImg" style="display: block;">This demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.</div>

Here is the JavaScript code

 

function toggle5(showHideDiv, switchImgTag) {
        var ele = document.getElementById(showHideDiv);
        var imageEle = document.getElementById(switchImgTag);
        if(ele.style.display == "block") {
                ele.style.display = "none";
        imageEle.innerHTML = '<img src="PIMLUS IMAGE Source">';
        }
        else {
                ele.style.display = "block";
                imageEle.innerHTML = '<img src="MiNUS IMAGE Source">';
        }
}

 

And also we added come css

<style type="text/css">
#headerDivImg, #contentDivImg, #contentDivImg_ {
     float: left;
     width: 510px;
}
#titleTextImg {
     float: left;
     font-size: 1.2em;
     font-weight: bold;
     margin: 5px;
}
#imageDivLink {
     float: right;
}
#headerDivImg {
     background-color: #0037DB;
     color: #9EB6FF;
}
#contentDivImg, #contentDivImg_ {
     background-color: #FFE694;
     text-align: center;
}
#headerDivImg img {
     float: right;
     margin: 10px 10px 5px 5px;
}
</style>

 

another simple example.

Demo

show

 

 

Here is the sample HTML and Javascript code

 

<script language="javascript"> 
function toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "show";
      }
    else {
        ele.style.display = "block";
        text.innerHTML = "hide";
    }
} 
</script>

<a id="displayText" href="javascript:toggle();">show</a> <== click Here
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

 

By default, the peek-a-boo text is loaded when the page loads but the display attribute for the div that the content resides in is set to none so it is not visible to the visitor. When the link is clicked, the toggle() JavaScript functions executes and checks the value of the display style for the div that contains the content that we want to toggle.

If the display style is none, the function will:
Set the display style to block – This is executed in the else block of the function. The inner HTML content of a DOM element with a block display setting will be visible unless it is furthered controlled by CSS styling.
Change the link text to hide – The inner HTML of the link text, which in this case is just show, is replaced with the hide text.

If the display style is block, the function will:
Set the display style to none – This is executed in the if block of the function. The inner HTML content of a DOM element with the none display setting will not be visible for the viewer.
Change the link text to show – The inner HTML of the link text, which in this case is just hide, is replaced with the show text.

Source: randomsnippets.com

3 comments

  1. Nancy says:

    Thanks for the share!
    Nancy.R

  2. Nancy Barbara says:

    Thanks for the share!
    Nancy

  3. diablo 3 says:

    I obtained very good information out of your web site

Leave a Reply to diablo 3 Cancel reply

Your email address will not be published. Required fields are marked *