<head>
<meta charset="utf-8">
<title>Accordian list</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
</head>
<body>
<h1>Accordian Menu with Jquery </h1>
<aside>
<ul id="father list-unstyled">
<li class="accord">Top sales<i class="fa fa-chevron-right pull-right" aria-hidden="true"></i></li>
<ul class="list-unstyled drob-list">
<li>cell phones</li>
<li>cameras</li>
<li>computer</li>
<li>video games</li>
<li>Tv audio</li>
</ul>
<li class="accord">Brand Focus<i class="fa fa-chevron-right pull-right" aria-hidden="true"></i></li>
<ul class="list-unstyled drob-list">
<li>cell phones</li>
<li>cameras</li>
<li>computer</li>
<li>video games</li>
<li>Tv audio</li>
</ul>
<li class="accord">Hi-Teck<i class="fa fa-chevron-right pull-right" aria-hidden="true"></i></li>
<ul class="list-unstyled drob-list">
<li>cell phones</li>
<li>cameras</li>
<li>computer</li>
<li>video games</li>
<li>Tv audio</li>
</ul>
<li class="accord">home goods<i class="fa fa-chevron-right pull-right" aria-hidden="true"></i></li>
<ul class="list-unstyled drob-list">
<li>cell phones</li>
<li>cameras</li>
<li>computer</li>
<li>video games</li>
<li>Tv audio</li>
</ul>
<li class="accord">Top Price<i class="fa fa-chevron-right pull-right" aria-hidden="true"></i></li>
<ul class="list-unstyled drob-list">
<li>cell phones</li>
<li>cameras</li>
<li>computer</li>
<li>video games</li>
<li>Tv audio</li>
</ul>
</ul>
</aside>
<section id="info" class="text-left text-capitalize">
<header>
Author Info ....
</header>
<ul class="list-unstyled text-capitalize">
<li>Muhammed yousrii Badr</li>
<li>Junior Front-end Developer </li>
<li> <a href="https://www.linkedin.com/in/muhammedyousrii/" target="_blank">Check Linkedin Acc</a> </li>
<li> <a href="https://wuzzuf.net/me/MuhammedYousrii" target="_blank"> Check Wuzzef Acc </a> </li>
</ul>
</section>
</body>/* Font */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700,900);
body {
font-family: 'Roboto', sans-serif;
line-height : 1.47 ;
background : #008891;
}
*,*::before,*::after {
margin : 0 ;
padding : 0 ;
box-sizing : border-box ;
-webkit-box-sizing : border-box ;
-moz-box0sizing : border-box ;
}
.list-unstyled {
padding-left : 0 ;
list-style : none ;
}
.pull-right {
float : right !important ;
}
h1 {
text-align : center ;
color : white ;
text-transform : capitalize;
padding : 12px 8px ;
width : 40% ;
margin : 20px auto ;
background : #00587A ;
font-weight : 500 ;
font-size : 32px ;
border-radius : 2px ;
-moz-border-radius : 2px ;
-webkit-border-radius : 2px ;
}
aside {
width : 25% ;
float:left ;
border-top-right-radius : 5px ;
-webkit-border-top-right-radius : 5px ;
-moz-border-top-right-radius : 5px ;
border-bottom-right-radius : 5px ;
-webkit-border-bottom-right-radius : 5px ;
-moz-border-bottom-right-radius : 5px ;
overflow:auto ;
}
aside .accord {
color : #2C3E50 ;
background : #FFFFFF ;
padding : 12px 22px ;
font-size : 16px;
font-weight : 600 ;
border-bottom : 1px solid #E4E5E7 ;
text-transform : capitalize ;
transition: all .4s ease ;
-webkit-transition:all .4s ease ;
-moz-transition : all .4s ease ;
}
aside .accord i {
color:gray ;
padding-top : 6px ;
}
aside .accord:hover {
background :#2C3E50 ;
color : white ;
cursor : pointer ;
}
aside .drob-list {
display : none ;
}
aside .drob-list li {
background : lightgray ;
color : dimgray;
padding : 10px 20px ;
border-bottom:1px solid white ;
font-size : 15px ;
font-weight : 600 ;
text-transform : uppercase ;
transition: all .4s ease ;
-webkit-transition:all .4s ease ;
-moz-transition : all .4s ease ;
}
aside .drob-list li:last-child {
border : none ;
}
aside .drob-list li:hover {
background : white ;
cursor : pointer ;
}
/* Author Info area*/
#info {
position : fixed ;
display : inline-block ;
min-height : 1px ;
bottom : 15px ;
right : 15px ;
background : #FFFFFF ;
border-top-left-radius : 3px ;
-moz-border-top-left-radius : 3px ;
-webkit-border-top-left-radius : 3px ;
}
#info header {
color : #FFFFFF ;
background : #00587A ;
padding : 8px 10px ;
border-top-left-radius : 3px ;
-moz-border-top-left-radius : 3px ;
-webkit-border-top-left-radius : 3px ;
}
#info ul {
padding : 5px 15px ;
}
#info li {
color : #2C3E50 ;
padding : 2px 4px ;
margin : 2px ;
}
/* Helper Classes */
.active-sub-list-item {
background : #FFFFFF ;
color : #2C3E50 ;
}$(document).ready(function(){
const els = {
accordLi : $('aside').find('.accord'),
chevRight : '<i class="fa fa-chevron-right pull-right" aria-hidden="true"></i>' ,
chevDown : '<i class="fa fa-chevron-down pull-right" aria-hidden="true"></i>'
} ,
speed = 500 ;
els.accordLi.on('click', function(){
const self = $(this),
selfIcon = self.children('i'),
collapsedMenu = self.next('ul');
self.toggleClass('slide');
if(self.hasClass('slide')){
// check If It has Class Slide
// true
/* Working on Selecting ListItem */
//slidedown collapsed menu
collapsedMenu.slideDown(speed);
//change icon
selfIcon.replaceWith(els.chevDown);
/* Working On Siblings */
// add activation class to current Li and Remove Form Other Siblings
self
.addClass('active-sub-list-item')
.siblings()
.removeClass('active-sub-list-item');
// make sure that all siblings collapsed slidedUp
self
.siblings()
.next('ul')
.slideUp(speed);
// make sure that all siblings icons Changed
self
.siblings('li')
.children('i')
.replaceWith(els.chevRight);
}
else {
collapsedMenu.slideUp(speed);
selfIcon.replaceWith(els.chevRight);
self.addClass('active-sub-list-item');
}
});
});//End Of Main Function Of Jquery
External CSS
This Pen doesn't use any external CSS resources.