Accordions are useful when we want to toggle between hiding and showing large amount of content:
We can easily make an accordion with a toggle effect in the menu section
Here there is code for standard accordion where we can customize to add our contents.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
</style>
</head>
<body>
<h2>Accordion</h2>
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
</body>
</html>
Customized accordion to show folder records dynamically:
{{#each details}}
<div class="Download-header-accordion">
<button class="accordion">
<div class="Download-header-detail-name">{{name}}</div>
<img id="notification-expand" class="Download-header-main-arrow"
src="../SSP Applications/NetSuite Inc. - SCA 2021.2.0/Development/img/Vector_download.png"
data-action="expandMessage" />
<div class="Download-header-detail-length">You have <font color="black" size="4px">{{sublength}}</font> downloads in
this section</div>
</button>
<div class="panel">
<br>
<ul class="two-col-special">
{{#each files}}
{{#if type}}
<div class="Download-division-image-details">
<li>
<div class="Download-division-image-button"><a href="{{url}}" target="_blank"
class="Download-header-image-button"><img class="Download-circle-main-image"
src="../SSP Applications/NetSuite Inc. - SCA 2021.2.0/Development/img/hide icon.png" /></a></div>
<div class="Download-image-subdetail-name">{{subname}}</div>
<div class="Download-image-subdetail-size">{{size}} MB</div>
</li>
</div>
{{else}}
</ul>
<div class="Download-division-pdf-details">
<a href="{{url}}" target="_blank" class="Download-header-subdetail-button">
<img class="Download-circle-main-arrow"
src="../SSP Applications/NetSuite Inc. - SCA 2021.2.0/Development/img/Group 193.png" /></a>
<div class="Download-header-subdetail-name">{{subname}}</div>
<div class="Download-header-subdetail-size">{{size}} MB</div>
</div>
{{/if}}
<br>
{{/each}}
</div>
</div>
<div class="Download-division-space"></div>
{{/each}}
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
$(document).ready(function () {
copybreadthcrumb()
setTimeout(function () { resizeheight() }, 10)
setTimeout(function () { resizeheight() }, 10)
setTimeout(function () { resizeheight() }, 10)
setTimeout(function () { resizeheight() }, 10)
setTimeout(function () { resizeheight() }, 10)
});
$(window).on('hashchange', function (e) {
copybreadthcrumb()
});
function copybreadthcrumb() {
$(".myaccount-layout .myaccount-layout-header").addClass('my-account')
}
$(window).resize(function () {
setTimeout(function () { resizeheight() }, 10);
});
$(window).on('hashchange', function (e) {
console.log('anikskdj')
resizeheight()
setTimeout(function () { resizeheight() }, 10);
});
function resizeheight() {
if (window.innerWidth >= 768) {
var mainheight = $("#content-wrapper-side-nav").height()
console.log(mainheight)
$(".myaccount-layout-side-nav").css('min-height', mainheight);
} else {
$(".myaccount-layout-side-nav").css('height', 'auto');
}
}
});
}
</script>