Multilple Accordion

open multiple accordion

by rambutan2000

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css">
<div class="accordion">
    <h3 class="disable-select">Title</h3>
    <p> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
</div>
<div class="accordion">
    <h3 class="disable-select">Title</h3>
    <p>lorem</p>
</div>
<div class="accordion">
    <h3 class="disable-select">Title</h3>
    <p>lorem</p>
</div>

CSS

body{font:62.5% Verdana,Arial,sans-serif}

.disable-select {
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

JavaScript

$(function() {
    $( ".accordion" ).accordion({
        collapsible: true,
        clearStyle: true,
        active: false,
        heightStyle: "content",
        animate: 100
    })
});