html Accordion menu

html Accordion menu

/* CSS */
$maincolor:  #8aa8bd;
$accent: #A8CC96;

.expand {
  float: right; 
  display: inline; 
  transition: all .2s ease;
  -webkit-transition: all .2s ease;
  margin: 0 10px;
}
 

.sidebar-1 {
  /* these are the styles for the container around the menu */
  text-align: right;
  padding: 0px;
  display:inline-block;
  box-shadow: 0 0px 1px 0 rgba(0,0,0,.2);
  margin-left: 20px;
}

.sidebar-menu {
  /*this style impacts the look of the heading containers. */
  cursor: pointer;
  padding: 10px;
  background: #ffffff;
  position: relative;
  color:$maincolor;
  border-bottom: 1px solid #dedede;
  font-size: 1.5em;
  font-weight: 300;
  text-rendering: optimizeLegibility;
  letter-spacing: .5px;
  padding-right: 50px;
  &:before, &:after {
    content: "";
    width: 3px;
    height: 25px;
    background: $accent;
    border-radius: 3px;
    position: absolute;
    right: 22px;
    top: calc(28.7px - 12.5px);
    transition: all .2s ease;
  }
  &:after {
    transform: rotate(90deg);
  }
}

.open:before {
  animation: turn-plus;
  animation-duration: .3s;
  animation-fill-mode: forwards;
}

.open:after {
  animation: turn-crossbar;
  animation-duration: .3s;
  animation-fill-mode: forwards;
}

@keyframes turn-plus {
  0% {
    transform: translate(0,0);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

@keyframes turn-crossbar {
  0% {
    transform:none;
    transform: rotate(90deg)
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

.sidebar-menu:hover {background: darken(#FFFFFF, 5%);}

.sub-menu {
  /*this style is for the sub-menu box*/
  color: darken($maincolor,30%);
  border-bottom: 1px solid #dedede;
  font-size: 1em;
  display: none;
  &:last-child {
    border-bottom: 0;
  }
}

.sub-menu li:hover {
  background: #cccccc;
  cursor: pointer;
}

.sub-menu li {
  /*this styles individual elements in a sub-menu*/
  padding: 10px;
  background: #d7d7d7;
  border-bottom: 1px solid #dedede;
  &:last-child {
    border-bottom: 0;
  }
}
.sub-menu ul {
  /*this just 0s out a bunch of stuff so that it plays nice with the list stylings*/
  list-style-type: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 540px) {
  .sidebar-menu {
    font-size: 1em;
    font-weight: 400;
  }
  .sub-menu {
    font-weight: 400;
  }
  .sidebar-1 {
    margin: 0;
    width: 100%
  }
  .sidebar-menu:after, .sidebar-menu:before {
    top: calc(23.5px - 12.5px);
  }
}

/* html */

  <div class='sidebar-1'>
    <div class='sidebar-menu'>Churches & Religious Services
      <div class='expand'></div>
    </div>
    <div class='sub-menu'>
      <ul>
        <li>The Vineyard at Johnstown</li>
        <li>Hillcrest Church of Christ</li>
        <li>Church of the Nativity</li>
        <li>Lighthouse of Utica</li>
        <li>Utica Baptist Temple</li>
        <li>Utica Presbyterian Church</li>
        <li>Utica Church of Christ</li>
        <li>Utica Methodist Church</li>
        <li>Northside Church of Christ</li>
      </ul>
    </div>
  </div>


/* js *


$(document).ready(function () {
  
    $('.sidebar-menu').mouseenter(function(){
      $(this).children('.expand').addClass('turn');
    });
  
    $('.sidebar-menu').mouseleave(function(){
      if ($(this).hasClass('open')) {
      } else {
        $(this).children('.expand').removeClass('turn');
      }
    });
    
    $('.sidebar-menu').click(function () {
      var $this = $(this);
      if ($this.hasClass('open')) {
        $('.sidebar-menu').removeClass('open');
        $('.sub-menu').stop(true).slideUp("fast");
        $('.expand').removeClass('turn');        
        $this.removeClass('open');
        $this.children('.expand').removeClass('turn');
        $this.next().stop(true).slideUp("fast");
      }    
      else {
        $('.sidebar-menu').removeClass('open');
        $('.sub-menu').stop(true).slideUp("fast");
        $('.expand').removeClass('turn');
        
        $this.addClass('open');
        $this.children('.expand').addClass('turn');
        $this.next().stop(true).slideDown("fast");
        }
    });
  
});