Introduction
This chapter demonstrates about the W3CSS Accordions is used to show and hide the content when it is broken into sections and following are the concepts covered in this chapter.
- Accordions
- Types of Accordions
Description
Accordions are used to show and hide the content when it is broken into sections which is done by the w3-accordion and w3-accordion-content is used to display the content. Following are the some classes as shown.
The code below demonstrates to hide and show the collapsed content as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>SPLESSONS Accordions</h2>
<p>An accordion is used to show (and hide) content that is broken into sections:</p>
<div class="w3-accordion w3-light-grey">
<button onclick="myFunction('Demo1')" class="w3-btn-block w3-left-align">Web Development</button>
<div id="Demo1" class="w3-accordion-content w3-container">
<h4>CSS</h4>
<p>W3.CSS</p>
</div>
<button onclick="myFunction('Demo2')" class="w3-btn-block w3-left-align">Scripts</button>
<div id="Demo2" class="w3-accordion-content w3-container">
<h4>JavaScript</h4>
<p>jQuery</p>
</div>
</div>
</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>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- W3-accordion Which is used to hide or show the collapsed content.
- W3-accordion-content The content should be displayed in the accordion.
Description
In order to hide and show the collapsed content W3.CSS has several types of Accordions in which some are listed below.
Accordion buttons
User can use any HTML element to open the Accordion content but buttons are more preferable compared to others because which spans the entire width of its parent element just like 100% width those buttons are centered by default in w3.CSS or user can use the w3-align class to align at a required position. In order to build these buttons user can use the w3-btn-block class. The code below demonstrates the Accordion buttons as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Accordion Buttons</h2>
<div class="w3-accordion w3-grey">
<button onclick="myFunction('Demo1')" class="w3-btn">
Normal button
</button>
<div id="Demo1" class="w3-accordion-content w3-container">
<p>SPLESSONS...</p>
</div>
<button onclick="myFunction('Demo2')" class="w3-btn-block w3-left-align w3-purple">
Left aligned & full-width
</button>
<div id="Demo2" class="w3-accordion-content w3-container">
<p>SPLESSONS...</p>
</div>
<button onclick="myFunction('Demo3')" class="w3-btn-block w3-blue">
Centered & full-width
</button>
<div id="Demo3" class="w3-accordion-content w3-container w3-center">
<p>Centered content as splessons!</p>
</div>
</div>
</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>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Accordion width
The width of Accordion by default is 100% but user can change the width of the Accordion to a required size with the width property. The code below demonstrates the Accordion width as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Accordion Width</h2>
<div class="w3-accordion w3-light-grey w3-section" style="width:25%">
<button onclick="myFunction('Demo1')" class="w3-btn-block">
25%</button>
<div id="Demo1" class="w3-accordion-content w3-container">
<p>SPlessons with 25% width</p>
</div>
</div>
<div class="w3-accordion w3-light-grey w3-section" style="width:50%">
<button onclick="myFunction('Demo2')" class="w3-btn-block">
50%</button>
<div id="Demo2" class="w3-accordion-content w3-container">
<p>SPlessons with 50% width</p>
</div>
</div>
<div class="w3-accordion w3-light-grey w3-section" style="width:75%">
<button onclick="myFunction('Demo3')" class="w3-btn-block">
75%</button>
<div id="Demo3" class="w3-accordion-content w3-container">
<p>SPlessons with 75% width</p>
</div>
</div>
<div class="w3-accordion w3-light-grey w3-section">
<button onclick="myFunction('Demo4')" class="w3-btn-block">
Default (100%)</button>
<div id="Demo4" class="w3-accordion-content w3-container">
<p>SPlessons with 100% width</p>
</div>
</div>
</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>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Accordion Content
In which user can also hide or show the collapsed content along with the links and user can also use the Sidenav which means side navigation user can insert the links. The code below demonstrates the Accordion content as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<body>
<nav class="w3-sidenav w3-blue w3-card-2" style="width:160px;">
<a href="#">Link</a>
<div class="w3-accordion">
<a onclick="myAccFunc()" href="#">
Accordion <i class="fa fa-caret-down"></i>
</a>
<div id="demoAcc" class="w3-accordion-content w3-grey w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="w3-dropdown-click">
<a onclick="myDropFunc()" href="#">
Dropdown <i class="fa fa-caret-down"></i>
</a>
<div id="demoDrop" class="w3-dropdown-content w3-grey w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</nav>
<div class="w3-container" style="margin-left:160px">
<h2>Accordions & Dropdowns</h2>
<h4>In Sidenav</h4>
<p>In this example, we have added an accordion and a dropdown menu inside the side navigation. Click on both to understand how they differ from each other. The accordion will push down the content, while the dropdown lays over the content.</p>
</div>
<script>
function myAccFunc() {
var x = document.getElementById("demoAcc");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-green";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-green", "");
}
}
function myDropFunc() {
var x = document.getElementById("demoDrop");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-green";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-green", "");
}
}
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Animated Accordion
In W3.CSS user can also build the animate Accordion by using the Animated Accordion which can come out with the fade, zoom or slide in the accordion content as shown in below code.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Animated Accordions</h2>
<div class="w3-accordion w3-light-grey">
<button onclick="myFunction('Demo1')" class="w3-btn-block w3-left-align">Accordion</button>
<div id="Demo1" class="w3-accordion-content w3-animate-zoom">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</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>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- Accordion buttons
- Accordion width
- Accordion Content
- Animated Accordion
Key Points
- User can also built the animated Accordion.
- Sidenav contain some links.
- By default Accordion have 100% width.