How to Show and Hide Divs on JavaScript in CSS

Using JavaScript to show and hide elements gives the user control over what they see.

Using a combination of JavaScript and Cascading Style Sheet code, you can cause division elements in your Web pages to appear and disappear with user interaction. You can initially set an element to be hidden in CSS, and then call a JavaScript function on user interaction with another element in your page. When the user interacts with this second element, you can toggle the visibility of the main element by altering its class name. The class name determines the CSS properties that apply to an HTML element, including visibility and display properties.

Instructions

1. Create the HTML div element you wish to show and hide. Add the following sample code to your page:

   <div id="content" class="hide">Here is the content</div>

   You can replace the content of the element with any text or other data you like, but make sure you include the ID and class attributes. The JavaScript code will use the ID attribute to identify and alter the element, while the class name will determine the styling applied to it at any time.

2. Add an interactive element to your page. To call your JavaScript function on user interaction with the page, you need to set up an element with an event listener. Add the following code immediately before the content element you're planning to show and hide:

   <div onclick="toggle('content')">Here is the heading - click to show or hide the content</div>

   You can replace the content of this div with any text you like. When the user clicks this div, it will cause the JavaScript function to toggle visibility of the content element. The "onclick" event listener attribute passes the ID of the content element as a parameter to the JavaScript function.

3. Add a style section to your page. To implement showing and hiding your element, you need to set display properties. Add the following style code to the head section of your HTML page:

   <style type="text/css">
   .hide { display:none; }
   .show { display:block; }
   </style>

   This code specifies the display properties for when the element is shown or hidden. The CSS code identifies the element using its class name attribute.

4. Add a JavaScript function to your page. Insert the following script section in your HTML head area:

   <script type="text/javascript">
   var isVisible = false;
   function toggle(item) {
   if(isVisible) {
   isVisible=false;
   document.getElementById(item).className='hide'; }
   else {
   isVisible=true;
   document.getElementById(item).className='show'; }}
   </script>

   The toggle function uses a variable to track the current visibility status of the element. Using the element ID attribute parameter, the code alters the div class name, alternating between show and hide. The class name will cause the CSS display properties for the element to alternate when this function executes.

5. Save your HTML file. Open your page in a Web browser. You should see the heading text but not the content when you initially view the page. Click the heading to see the effect of your function. Each time you click the heading div, the content div should either appear or disappear, alternating between the two. The heading div should remain visible throughout.

Tips & Warnings

• Using JavaScript libraries such as jQuery, you can add animated effects when you show and hide elements.

• Make sure it is clear to users how to access your hidden content or they may miss it.

References

• W3Schools: HTML <div> Tag
• W3Schools: HTML / XHTML Standard Event Attributes
• W3Schools: CSS How To
• W3Schools: CSS Id and Class
• W3Schools: JavaScript Functions
• W3Schools: Document getElementById() Method
• W3Schools: HTMLElement className Property

Resources

• W3C: The Global Structure of an HTML Document
• jQuery API: .toggle();