Ad:

JavaScript / DHTML / AJAX Discussion Thread
Marked Solved
Views: 16263

Jul 25th, 2007

Help: Show - Hide

Expand Post »

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.

Similar Threads

Link from one form to another in Visual Basic 4 / 5 / 6
show/hide files in tools/folder options not showing in Windows NT / 2000 / XP
Hide and unhide web objects in VB.NET
Amazing Website Designs - How do they do this? in Site Layout and Usability
Hide all DIV's On Click in JavaScript / DHTML / AJAX

Pro2000

Reputation Points: 44

Solved Threads: 23

Posting Whiz

Offline

350 posts
since Jun 2007

Permalink

Jul 25th, 2007

Re: Help: Show - Hide

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.

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>

~s.o.s~

Super Moderator

Featured Poster

Reputation Points: 3241

Solved Threads: 719

Failure as a human

Offline

8,873 posts
since Jun 2006

Permalink

Jan 17th, 2009

Re: Help: Show - Hide

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

Example :

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.

Markweb

Reputation Points: 10

Solved Threads: 1

Newbie Poster

Offline

2 posts
since Dec 2008

Permalink

Feb 12th, 2010

Re: Help: Show - Hide

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

Reputation Points: 10

Solved Threads: 1

Newbie Poster

Offline

2 posts
since Feb 2010

Permalink

Feb 12th, 2010

Re: Help: Show - Hide

where is my answer

sumit1893

Reputation Points: 10

Solved Threads: 1

Newbie Poster

Offline

2 posts
since Feb 2010

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Check Request headers of a Browser.

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: JAVASCRIPT Page Refresh

DaniWeb Message

Cancel Changes

User Name
Password