W3CSS Accordion

An accordion is a link, button or source element which when clicked opens a related section. An accordion, like drop down is a very good way of saving space on website. In this article we shall study W3CSS accordion.

A basic W3CSS Accordion

It is very easy to create a basic W3CSS accordion. You need a button or link, a section that opens when the button or link is clicked and some JavaScript that binds button’s click event with the section. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<button onclick="myFunction('home')" class="w3-button w3-blue w3-left-align">
Open Home</button>

<div id="home" class="w3-container w3-hide">
  <p>Welcome to Home Page.</p>
</div>

<script>
function myFunction(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else { 
        x.className = x.className.replace(" w3-show", "");
    }
}
</script>


</body>
    
</html>

Download the code Try the code

In the above code, we have a button with blue background. When the button is clicked javascript function “myFunction” is called and the “home” is passed to the function. Next we have a section with id “home”. Inside the JavaScript “myFunction” the element whose id is passed is stored in a variable. If the variable doesnt have a “w3-show” class, this class is added to the list of classes of the element. This displays the element on screen. On the other hand, if the element already has “w3-show” class it is replaced by empty string, which hides the section.

Accordion with Multiple Sections

In the previous example, we had only one button and one corresponding section which opened or closed at button click. You can have as many accordions on one page as you like. The trick is to add sections with different ids and then pass those ids to the JavaScript function via button clicks. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<button onclick="myFunction('home')" class="w3-button w3-blue w3-left-align">
Home</button>

<div id="home" class="w3-container w3-hide">
  <p>Welcome to Home Page.</p>
</div>

    <br>
<button onclick="myFunction('about')" class="w3-button w3-red w3-left-align">
About</button>

<div id="about" class="w3-container w3-hide">
  <p>This is an about page.</p>
</div>
    <br>
<button onclick="myFunction('contact')" class="w3-button w3-yellow w3-left-align">
Contact</button>

<div id="contact" class="w3-container w3-hide">
  <p>Our contact number is XXXXXXXX.</p>
</div>

<script>
function myFunction(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else { 
        x.className = x.className.replace(" w3-show", "");
    }
}
</script>


</body>
    
</html>

Download the code Try the code

Accordion With Highlighted Links

You can also highlight the button which is currently active accordion. The technique is to get the id of the button and add some color class if it doesnt already exist. If the color class already exists, it means the accordion is active. In such cases replace the color class with default color. The following example explains this concept.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<button onclick="myFunction('home')" class="w3-button w3-blue w3-left-align">
Home</button>

<div id="home" class="w3-container w3-hide">
  <p>Welcome to Home Page.</p>
</div>

    <br>
<button onclick="myFunction('about')" class="w3-button w3-blue w3-left-align">
About</button>

<div id="about" class="w3-container w3-hide">
  <p>This is an about page.</p>
</div>
    <br>
<button onclick="myFunction('contact')" class="w3-button w3-blue w3-left-align">
Contact</button>

<div id="contact" class="w3-container w3-hide">
  <p>Our contact number is XXXXXXXX.</p>
</div>

<script>
function myFunction(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
        x.previousElementSibling.className = 
        x.previousElementSibling.className.replace("w3-blue", "w3-red");
    } else { 
        x.className = x.className.replace(" w3-show", "");
        x.previousElementSibling.className = 
        x.previousElementSibling.className.replace("w3-red", "w3-blue");
    }
}
</script>


</body>
    
</html>

Download the code Try the code

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .