Home > Javascript > Show and Hide DIV with Button Click using Javascript

Show and Hide DIV with Button Click using Javascript


Hi

try this example :-

<script language="javascript" type="text/javascript">
       function toggleDiv() 
       { 
         if (document.getElementById("myDivBox").style.display == "block") 
         { 
           document.getElementById("myDivBox").style.display = "none"; 
         } 
         else 
         { 
           document.getElementById("myDivBox").style.display = "block"; 
         } 
       } 
     </script>

<asp:Button ID="button1" runat="server" OnClick="toggleDiv()" />
    <div>

        <div id="myDivBox" style="display:none; width :300px">
          Get a head start on making money from surveys! We worked out special deals with
        </div>
    </div>

and in code behind :-

protected void Page_Load(object sender, EventArgs e)
    {
        button1.Attributes.Add("onclick", "javascript:toggleDiv(); return false;");
    }

//– There is another way to Hide Button after Show DIV

<script language="javascript" type="text/javascript">
       function toggleDiv() 
       { 
         if (document.getElementById("myDivBox").style.visibility == "hidden") 
         { 
           document.getElementById("myDivBox").style.visibility = "visible";
           document.getElementById("Button1").style.visibility="hidden"; 
         } 
         else 
         { 
           document.getElementById("myDivBox").style.visibility = "hidden";
           document.getElementById("Button1).style.visibility="visible";
         } 
       } 
     </script>
<asp:Button ID="button1" runat="server" OnClientClick="toggleDiv(); return false;"  />
    <div>
   
        <div id="myDivBox" style=" width :300px; visibility:hidden">
          Get a head start on making money from surveys! We worked out special deals with
        </div>

Hope this helps

Good Luck

Advertisements
Categories: Javascript
  1. avinash
    April 1, 2009 at 6:34 am

    Hi nice article

    But I want Display a div as well as to disable the Button…

    So two things should happen… any idea how to do that?

  2. yasserzaid
    April 1, 2009 at 6:10 pm

    Hi avinash

    Thank you for your comment
    According to your question i update my post so check it again
    to hide button after show DIV
    Hope this helps and let me know

    Good Luck

  3. May 9, 2010 at 9:13 am

    nice post

  4. yasserzaid
    May 9, 2010 at 10:12 am

    @ucfm : Thank you hope my post helps you

  5. Aaron Howland
    September 19, 2012 at 9:05 pm

    Thanks for this! Been looking for this code for hours, and this is the first example that worked for me. Much appreciated!

  6. yasserzaid
    October 6, 2012 at 9:54 am

    @Aaron Howland : You are welcome

  7. Yunus Aslam
    November 6, 2012 at 5:51 am

    Its Quite good.. Thanks Man..

  8. yasserzaid
    November 10, 2012 at 11:54 am

    @Yunus Aslam : you are welcome

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: