Help: Show - Hide

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.

Pro2000

Posting Whiz

351 posts since Jun 2007

Reputation Points: 44

Solved Threads: 23

4 Years Ago

0

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.

<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>
        
        <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>
        
        <input type="button" onclick="hide2();" value="Hide" />
        <input type="button" onclick="show2();" value="Show" />
    </form>
</body>
</html>

~s.o.s~

Failure as a human

Administrator

11,938 posts since Jun 2006

Reputation Points: 3,281

Solved Threads: 734

3 Years Ago

0

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

Example :

<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>

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

Markweb

Newbie Poster

2 posts since Dec 2008

Reputation Points: 10

Solved Threads: 1

2 Years Ago

0

if i want to select the three option button and fourth option butoon if i click thna show the radio button accound to condtion

sumit1893

Newbie Poster

2 posts since Feb 2010