AJAX

Help: Show - Hide

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jun 2007

Posts: 71

Reputation: Pro2000 is an unknown quantity at this point

Solved Threads: 1

Pro2000

Offline

Junior Poster in Training

Help: Show - Hide

Jul 25th, 2007

Peace, Can you help me with Show And Hide?:
I made an Input text I want to hide it, And I want to show it if I click on a button. How can I do it?
Thanks.

The great scientist see his web-site:
http://www.elnaggarzr.com/en
I'm sure that will be good for you!

•

Join Date: Jun 2006

Posts: 7,648

Reputation: ~s.o.s~ has much to be proud of

Solved Threads: 474

~s.o.s~

Offline

Failure as a human

Re: Help: Show - Hide

Jul 25th, 2007

It can be done in two ways. The difference between the two methods is obvious: one of them(visibility) doesn't change the page layout while the other(display) does.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<html>
<head>
    <script>
    function hide()
    {
        var elem = document.getElementById('myP');
        elem.style.display = 'none';
    }
    function show()
    {    
        var elem = document.getElementById('myP');
        elem.style.display = '';
    }
 
    function hide2()
    {
        var elem = document.getElementById('myP2');
        elem.style.visibility = 'hidden';
    }
    function show2()
    {    
        var elem = document.getElementById('myP2');
        elem.style.visibility = 'visible';
    }
    </script>
</head>
<body>
    <form>
        <h2 align="center">Using the display property of CSS</h2>
        <p id="myP">Here is some text which I want to hide</p>
        <br />
        <input type="button" onclick="hide();" value="Hide" />
        <input type="button" onclick="show();" value="Show" />        
 
        <h2 align="center">Using the visibility property of CSS</h2>
        <p id="myP2">Here is some text which I want to hide</p>
        <br />
        <input type="button" onclick="hide2();" value="Hide" />
        <input type="button" onclick="show2();" value="Show" />
    </form>
</body>
</html>
<html>
<head>
    <script>
    function hide()
    {
        var elem = document.getElementById('myP');
        elem.style.display = 'none';
    }
    function show()
    {    
        var elem = document.getElementById('myP');
        elem.style.display = '';
    }
    
    function hide2()
    {
        var elem = document.getElementById('myP2');
        elem.style.visibility = 'hidden';
    }
    function show2()
    {    
        var elem = document.getElementById('myP2');
        elem.style.visibility = 'visible';
    }
    </script>
</head>
<body>
    <form>
        <h2 align="center">Using the display property of CSS</h2>
        <p id="myP">Here is some text which I want to hide</p>
        <br />
        <input type="button" onclick="hide();" value="Hide" />
        <input type="button" onclick="show();" value="Show" />        
        
        <h2 align="center">Using the visibility property of CSS</h2>
        <p id="myP2">Here is some text which I want to hide</p>
        <br />
        <input type="button" onclick="hide2();" value="Hide" />
        <input type="button" onclick="show2();" value="Show" />
    </form>
</body>
</html>

I don't accept change; I don't deserve to live.

Jo Tujhe Jagaaye, Nindein Teri Udaaye Khwaab Hai Sachcha Wahi.
Nindon Mein Jo Aaye Jise To Bhul Jaaye Khawab Woh Sachcha Nahi.
Khwaab Ko Raag De, Nind Ko Aag De

•

Join Date: Dec 2008

Posts: 2

Reputation: Markweb is an unknown quantity at this point

Solved Threads: 0

Markweb

Offline

Newbie Poster

Re: Help: Show - Hide

Jan 17th, 2009

Easiest solution is to use one javascript function to show and hide.

Example :

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<a onclick ="javascript : ShowHide('HiddenDiv')" href="javascript:;" >Show/Hide</a>
 
<div class="mid" id="HiddenDiv" style="DISPLAY: none" >
This text was hidden
</div>
 
<script language="JavaScript">
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
</script>
<a onclick ="javascript : ShowHide('HiddenDiv')" href="javascript<b></b>:;" >Show/Hide</a>

<div class="mid" id="HiddenDiv" style="DISPLAY: none" >
This text was hidden
</div>

<script language="JavaScript">
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
</script>

For more details visit article
How to show and hide HTML elements using Javascript

Last edited by peter_budo; Jan 18th, 2009 at 2:03 pm. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.