Member Avatar for Pro2000

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.

  • 4 Contributors
  • 4 Replies
  • 167 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by sumit1893

Recommended Answers

All 4 Replies

Member Avatar for ~s.o.s~

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>
        <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>
Member Avatar for Markweb

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

Member Avatar for sumit1893

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

Member Avatar for sumit1893

where is my answer

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.