<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.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js