<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/lib/w3.css">
<link rel="stylesheet" href="../../cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<body>
<nav class="w3-sidenav w3-light-grey 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-white 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-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#">Link</a>
<a href="#">Link</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>