Show or Hide Div content when click on Button or text


Sometime we are willing to show some content only after clicking on submit button or text and hide it back on clicking on the same button or text
it’s useful when you have bunch of Details information that needs a lot of space and you want to give users to chose if they want to see this details
to do so we should create a java script function like this

<script type="text/javascript" language="javascript">// <![CDATA[
function showHide() {
    var ele = document.getElementById("showHideDiv");
    if(ele.style.display == "block") {
            ele.style.display = "none";
      }
    else {
        ele.style.display = "block";
    }
}
// ]]></script>

this function will override Display style of Div tag By ID  “showHideDiv”

so let’s assume that we have a form like this:

<form method="post" action="">
<p><input type="button" value="Show-Hide" onclick="return showHide();" /></p>
</form>
<div id="showHideDiv" style="display:none;">hello!</div>

Notice that in input tag we added onclick=”return showHide();” which calls java script function and DIV tag by id id=”showHideDiv” and style=”display:none;” which hid the div by default

Ok that’s it see the example bellow:

One comment

  1. Steve Glasby says:

    Good day! I could have sworn I’ve been to this website before but after browsing through some of the post I realized it’s new to me. Anyhow, I’m definitely delighted I found it and I’ll be book-marking and checking back often!

Leave a Reply to Steve Glasby Cancel reply

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