Simple accordion with hover

by PlayboyZP

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<body>
  
  <div id="blue_menu" class="full-size acc-place">
      <div class="acc-header">First button</div>
      <div class="acc-content"> 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed purus aliquet, congue nisi ac, mollis tellus. Cras id ultrices orci. In hac habitasse platea dictumst. Donec urna lorem, tincidunt at vestibulum vel, aliquet tempor dolor. Proin dolor arcu, vestibulum et magna ut, rutrum tincidunt orci. Duis suscipit est ut magna faucibus venenatis. Etiam posuere dui lobortis pulvinar rutrum. 
      </div>

      <div class="acc-header">Second button</div>
      <div class="acc-content"> 
          Mauris lorem erat, fermentum et eleifend in, faucibus consectetur mi. Vestibulum sed ligula a nisi suscipit maximus et ut felis. Phasellus ac finibus tortor. Etiam sed dui porttitor mauris condimentum pharetra. Nullam feugiat ex et leo molestie, eu dignissim nunc ullamcorper. Sed eget sapien sed lectus sodales tincidunt. Proin vestibulum enim a ante placerat, quis semper enim rutrum. Nunc posuere dolor massa, at vestibulum leo lacinia in. Sed tempor justo non maximus viverra. Ut pretium suscipit euismod. In euismod felis nisi, ac sollicitudin turpis fermentum sit amet. Quisque convallis enim eu metus dictum, vel tempus quam venenatis. Praesent ac nisl vitae lacus elementum dictum. Vestibulum id tincidunt lacus, sed efficitur nisi. Phasellus posuere, risus eu pharetra venenatis, lectus velit tincidunt turpis, ac ultrices velit mauris nec ex. Sed ultricies eros et ex efficitur, ut ultricies elit accumsan. 
      </div>

      <div class="acc-header">Third button</div>
      <div class="acc-content"> 
         Aenean dictum augue ac laoreet cursus. Nulla vitae dui lorem. Vestibulum eu diam at ex dictum interdum. Curabitur condimentum dui consequat sem rhoncus lacinia. Suspendisse...

CSS

#blue_menu {
    background-color: #02ACC3;
    color: white;
    font-size: 22px;
    position: relative;
}

.acc-header {
    float: left;
    text-align: center;
    padding: 10px 0; 
    width: 33.33%;        
    background-color: #02ACC3;
    cursor: pointer; 
}
.acc-header.ui-state-active {
    background-color: #189429;
}

.acc-content {
    position: absolute;
    top: 48px;    
    background-color: #189429;    
    width: 100%;
}

.full-size {
    width: 100%;
    float: left;
    clear: both;
}

JavaScript

(function($){    
   $( ".acc-place" ).accordion({
        active: false,
        collapsible: true,
        heightStyle: "content",
        header: ".acc-header",
        event: "mouseover"        
    }); 
    
    $(".acc-place").mouseleave(function(){
        $( ".acc-place" ).accordion({ active: false});  
    });    
})(jQuery);