Basic JS Function to Show/Hide (Toggle) an Element
Posted on November 12, 2008, Filled under JavaScript, 
Bookmark it
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
Related Posts
Equivalent of PHP’s in_array() functionat September 13, 2008 with 6 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 32 comments
Catch404: Modal Plugin for Handling Broken Links: jQuery | CSSby Gabriel C. on July 31, 2010
Discover How to Make a Website: 50 Mistakes You Should Avoidby Gabriel C. on July 13, 2010
Simple Lightboxing | The Programmer's Lightbox Tool | Lightbox_meby Gabriel C. on June 4, 2010
Grab a copy of Six Figure Affiliate Blogging: Free eBookby Gabriel C. on May 18, 2010
- High resolution zoom with image tiles: http://www.ajax-zoom.com
on August 26th, 2010 by SF
- Hi,I have implement this. When successfully logged in then not redirect to private.php... It just
on August 25th, 2010 by rashidul
- Hi, here in italian we have problem with "è, ì, à, ò" when my customer
on August 25th, 2010 by arcibald
- Hey, I wanted to know how to make this into SMTP method, cuz my server filters
on August 25th, 2010 by Anks
Categories
- AJAX (18)
- Design (9)
- Flash (19)
- Freebies (5)
- General (3)
- Graphics (13)
- HTML & CSS (28)
- Frameworks (7)
- JavaScript (122)
- Frameworks (4)
- jQuery (58)
- MooTools (13)
- Photoshop (2)
- PHP (102)
- Reviews (4)
- Statistics (2)
- Web Tools (6)
- Wordpress (14)
Poll
Loading ...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
- lightbox
- 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 "Basic JS Function to Show/Hide (Toggle) an Element"
January 2, 2009 at 1:33 PM
Nice…