'Custom Dropdown With Accordion'

We are defining the steps 'how to create - custom dropdown with accordion'

how to create custom dropdown with accordion

Step1

Add this style css before the closing of </head> tag

<style type="text/css">
.report-label-scope .select-label {
position: relative;
left: 0;
top: 0;
width: 100%;
padding: 3px 25px 3px 7px;
display: block;
height: 29px;
background: red;
background: #fff;
border: 1px solid #d4d4d4;
border-radius: 3px;
margin-bottom: 5px;
font-family: arial;	
}
.report-label-scope.active-agent .nav-dropdown {
display: block;
}	
@media only screen and (min-width: 720px){
.report-label-scope .select-label {
position: relative;
left: 0;
top: 0;
width: 200%;
padding: 3px 25px 3px 10px;
display: block;
height: 50px;
background: red;
background: #fff;
border: 1px solid #d4d4d4;
border-radius: 3px;
}
}
.report-label-scope .select-label span.selection {
overflow: hidden;
white-space: nowrap; font-size: 12px;
color: #444;
display: block;
}	

@media only screen and (min-width: 720px){
.report-label-scope .select-label span.selection {
overflow: hidden;
white-space: nowrap;
font-size: 16px;
color: #444;
display: block;
padding-top: 10px;
font-weight: bold;
}	
}
.report-label-scope .select-label i {
position: absolute;
right: 7px;
top: 6px;
height: 12px;
width: 12px;
}
.report-label-scope .select-label i polygon{fill:#404142}	

@media only screen and (min-width: 720px){
.report-label-scope .select-label i {
position: absolute;
right: 15px;
top: 14px;
width: 8px;
height: 12px;
}	}
.nav-dropdown {
display: none;
left: 0;
position: absolute;
top: 100%;
z-index: 100;
}
.report-label-scope .select-label .nav-dropdown, .report-label-scope .select-label .nav-dropdown .nav-data {
width: 100%;
}
.report-label-scope .nav-data {
background-color: #fff;
border: 1px solid #d1d3d4;
display: block;
padding: 5px 0;
width: 180px;
border-radius: 3px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
.report-label-scope .nav-data ul {
clear: both;
display: block;
float: none;
list-style: none;
margin: 0;
padding: 0;
}
.report-label-scope .nav-data li {
clear: both;
display: block;
float: none;
margin: 0;
padding: 0px 0;
text-align: left;
}

.report-label-scope .nav-data a {
color: #6d6e71;
display: block;
float: none;
margin: 0;
padding:6px 12px;
text-decoration: none;
transition: color .5s ease;
font-size: 11px;
}
.report-label-scope .nav-data a:hover {
color: #ff501e;

}

/*smart search*/

.report-label-scope .select-filter-menu {
cursor: pointer;
padding:0px 4px 0px 0px;
width: 100%;  	
border: none;
text-align: left;
outline: none;
font-size: 12px;
transition: 0.4s;
background: none;
}

.report-label-scope .select-filter-menu .menu01 {
cursor: pointer;
padding: 6px 12px;   	
border: none;
text-align: left;
outline: none;
font-size: 12px;
transition: 0.4s;

}
.report-label-scope .select-filter-menu .menu01.bg-grey {
background: #f8f8f8;
}
.report-label-scope .select-filter-menu .menu01.bg-white {
background: #fff;
}	

.report-label-scope .select-filter-menu  .active, .menu01:hover {
background-color:none;
}

.report-label-scope .select-filter-menu .menu01:before {
content: '\002B';
color: #777;
font-weight: bold;
float: left;
margin-right: 5px;
}

.report-label-scope .select-filter-menu .active:before {
content: "\2212";
}

.report-label-scope .select-filter-menu .panel {
padding: 0 0px 0px 0px ;
background-color:transparent;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
margin-bottom: 0; 
border-bottom:2px solid #f8f8f8;
box-shadow: none;	
}
.report-label-scope .select-filter-menu .panel ul{margin: 0 ; padding: 0}	
.report-label-scope .select-filter-menu .panel ul li {margin:0; padding: 0; list-style: none;}	
.report-label-scope .select-filter-menu .panel li a {text-decoration: none; display: block; color:#6d6e71; padding:3px 6px 3px 30px; font-size: 12px; line-height: 20px; border-top: 1px solid #f8f8f8; }	
.report-label-scope .select-filter-menu .panel li a:hover {outline: 0; color:#db2128; }
</style>	

Step2

Paste the html into the <body> tag

<div style="padding: 50px;width:300px; margin:0 auto" >
<div class="report-label-scope">
<div class="select-label">
<span class="selection">Work</span> <i><b>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<polygon points="16,5 8,13 0,5 "></polygon>
</svg>
</b></i>
<div class="nav-dropdown">
<div class="nav-data">
<ul>
<li>
<div class="select-filter-menu ">
<a href="javascript:void(0);" class="menu01 bg-grey">Report Heading 01</a>
<div class="panel" >
<ul>
<li><a href="#">RCO Report</a></li>
<li><a href="#">LIM Report</a></li>
</ul>
</div></div>	
</li>
<li>
<div class="select-filter-menu ">
<a href="javascript:void(0);" class="menu01 bg-white">Report Heading 02</a>
<div class="panel" >
<ul style="margin:0; padding:0px 0">
<li><a href="#">MIS Report 01</a></li>
<li><a href="#">MIS Report 02</a></li>
</ul>
</div></div>	
</li>
<li>
<div class="select-filter-menu ">
<a href="javascript:void(0);" class="menu01 bg-grey">Report Heading 03</a>
<div class="panel" >
<ul>
<li><a href="#">P & L </a></li>
<li><a href="#">Balance Sheet</a></li>
<li><a href="#">Cash Flow</a></li>
</ul>
</div></div>	
</li>	
</ul>
</div>
</div>
</div>
</div>
</div>

	

Step3

Simply add the below code before end of </body> tag:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
$(".select-label").click(function(){
$(".report-label-scope").addClass("active-agent");
});
});	
$(document).on('mouseup touchleave', function (e) {
if ( !$('.report-label-scope').is(e.target) && $('.report-label-scope').has(e.target).length === 0 ) {
$('.report-label-scope').removeClass('active-agent');
}		
});	
</script>

<script>
var acc = document.getElementsByClassName("menu01");
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.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>

Copyright © 2020. All rights reserved.