[Home]
[Edit this page]
[Recent Changes]
[Special Pages]
[Help]
QbasicFAQ_Double buffer » CurlApplications » SQLInsert » FreeSoftware » CPP-Beginners-Tutorial » CppWindows » QbasicFAQ_WinVista » CppOop » QbasicFAQ_PlayAndSound » BeginnersGuideToJavaScript » How_To_Javascript_Show_Hide_Elements_On_Button_Click
Place this between the <head></head> tags in the HTML page.
Place this between the <body></body> tags in the HTML page.
The function looks for the id of the element passed using the getElementById method of the document object.
If the element's style property is set to display="none" that is the element is not visible, then it will set it to display="block".
If the element's style property is set to display="block" that is the element is visible, then it will set it to display="none".
When set to "block" the element will appear block style, that is on a new line. To display the element inline, that is on the same line with another element, set the display property to an empty string.
Related threads:
Textbox hide and show with button click
JavaScript FAQ
[Edit this page] [Page history] [What links here] [Discuss this topic] [Printer Friendly]
QbasicFAQ_Double buffer » CurlApplications » SQLInsert » FreeSoftware » CPP-Beginners-Tutorial » CppWindows » QbasicFAQ_WinVista » CppOop » QbasicFAQ_PlayAndSound » BeginnersGuideToJavaScript » How_To_Javascript_Show_Hide_Elements_On_Button_Click
How to hide and show elements on the click of a button?
It can be useful to have the ability to show HTML elements on user demand on the webpage. Code samples, forms, images or menu items are such examples.Place this between the <head></head> tags in the HTML page.
<script type="text/javascript" language="javascript">
function showHide(id)
{
el = document.getElementById(id);
if (el.style.display == "none")
{
el.style.display = "block";
}
else
{
el.style.display = "none";
}
}
</script> Place this between the <body></body> tags in the HTML page.
<input type='button' name='button1' value='Show/Hide textbox' onclick="showHide('id1');"/>
<input type="text" id='id1' /> The function looks for the id of the element passed using the getElementById method of the document object.
If the element's style property is set to display="none" that is the element is not visible, then it will set it to display="block".
If the element's style property is set to display="block" that is the element is visible, then it will set it to display="none".
When set to "block" the element will appear block style, that is on a new line. To display the element inline, that is on the same line with another element, set the display property to an empty string.
el.style.display = "";
Related threads:
Textbox hide and show with button click
JavaScript FAQ
[Edit this page] [Page history] [What links here] [Discuss this topic] [Printer Friendly]
