A Basic JS Function to Show/Hide (Toggle) an Element
Posted on November 12, 2008, Filled under JavaScript, 
Bookmark it
Thanks for visiting our website! We regularly publish posts like this one. If you are interested in receiving the latest updates as soon as they are posted, please consider subscribing to the RSS feed or to our e-mail newsletter.
This is a simple JS function to show/hide an element. The element is hided by setting its ‘display’ CSS attribute to none. When the element is showed back the ‘display’ attribute is set to block.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>A Basic Show/Hide JavaScript Function</TITLE>
<META NAME="Author" CONTENT="Bit Repository">
<META NAME="Keywords" CONTENT="show, hide, js, function">
<META NAME="Description" CONTENT="A Basic Show/Hide JavaScript Function">
<STYLE TYPE="text/css">
<!--
#info_box {
border: 1px solid green;
padding: 3px;
margin-top: 10px;
-moz-border-radius: 3px;
display: none;
}
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function toggle(name)
{
var id = document.getElementById(name);
if(id.style.display == '') // Invisible? Show it
{
id.style.display = 'block';
}
else if(id.style.display == 'block') // Visible? Hide it
{
id.style.display = '';
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
Click <a href="JavaScript: toggle('info_box');">here</a> to show/hide the info box.
<div id="info_box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Curabitur at leo. Quisque tempus.</div>
</BODY>
</HTML>
DEMO
Do you wish to receive the latest updates as soon as they are posted? Get our RSS Feed or Subscribe to the Newsletter!
- November 12, 2008
- article by Gabriel C.
- 1 comment
Sponsors
Related Posts
-
Equivalent of PHP’s in_array() functionat September 13, 2008 with 4 comments
-
Equivalent of PHP’s array_combine() function
at October 15, 2008
-
Basic Usage of the JS onChange() Event Handler
at November 11, 2008
-
Generate a jQuery UI Slider using Data from a Select Elementat August 22, 2009 with 4 comments
-
Creating an AJAX Login Form using MooToolsat December 21, 2008 with 26 comments
- Yeap. Its cool. Its very nice script
on March 12th, 2010 by Shailesh Mane
- O also extend the code so that more languages are available for highlighting... which it
on March 12th, 2010 by One More
- I just wanted to say awesome job! I really like this. I have some future suggestions: Create
on March 12th, 2010 by Awesome
- I'm having problems with the jQuery Maskedinput, when active field validation crashes. How to solve? jQuery
on March 11th, 2010 by workperfect
-
Slideshow with smooth animated transition: jQuery Blindsby Gabriel C. on March 11, 2010
-
Flabell Birthday Bundle - 26 Flash Components - Happy Birthday!by Gabriel C. on March 6, 2010
-
Embed Google Maps into your website: gMap jQuery Pluginby Gabriel C. on March 5, 2010
-
Simple Bar and Stacked Bar (AJAX) Graphs: mooBarGraphby Gabriel C. on March 4, 2010
Categories
- AJAX (17)
- Design (8)
- Flash (19)
- Freebies (2)
- General (3)
- Graphics (10)
- HTML & CSS (26)
- Frameworks (6)
- JavaScript (110)
- Frameworks (4)
- JQuery (46)
- MooTools (12)
- Photoshop (2)
- PHP (102)
- Reviews (3)
- Statistics (2)
- Web Tools (6)
- Wordpress (13)
Advertisements
Tag Cloud
- ajax login
- alphabetical
- array
- auto grow
- base
- calculate
- captcha
- chart
- charts
- countdown
- css framework
- delimiters
- documents
- dropdown
- extension
- extract
- filename
- fonts
- form
- gd library
- icon set
- iphone
- mod_rewrite
- percent
- Photo Gallery
- picker
- random
- remove
- script.aculo.us
- search
- shopping cart
- skin form elements
- slider
- syntax highlighter
- tableless
- to-do
- validate
- web analytics
- web fetch
- WYSIWYG
- zoom
One Reply to "A Basic JS Function to Show/Hide (Toggle) an Element"
January 2, 2009 at 1:33 PM
Nice…