JSFiddle - React, Tailwind, and code Playground

by ilyasnone

HTML

<script src="view-source:http://webcloud.se/jQuery-Collapse/src/jquery.collapse.js"></script>
<div class="mi" data-collapse="accordion persist">
        <h3 class="open">Hello</h3>
        <div>
          <p>Hello Sir.</p>
          <p>I'm sliding</p>
        </div>
        <h3>Anarachy in the UK</h3>
        <div>I like tea</div>
        <h3>Indeed</h3>
        <div>This is some information</div>
      </div>

<div class="mi" data-collapse="accordion persist">
        <h3>Hello2</h3>
        <div>
          <p>Hello Sir.</p>
          <p>I'm sliding</p>
        </div>
        <h3>Anarachy in the UK2</h3>
        <div>I like tea</div>
        <h3>Indeed2</h3>
        <div>This is some information</div>
      </div>

CSS

h3 {
    background-color: #f2f2f2;
    border-top:1px solid #9c0000;
    border-top:1px solid #9c0000;
    margin: 0;
    font-family:arial;
}
h3 a {
    background: url("http://webcloud.se/jQuery-Collapse/sprite.png") no-repeat scroll 15px 13px transparent;   
    color: #9c0000;
    display: block;
    font-weight: normal;
    margin: 0;
    padding: 5px 10px 5px 32px;
    text-decoration: none;
}
h3:hover {
    background: none repeat scroll 0 0 #fff;
}
h3.open {
    background: none repeat scroll 0 0 #f2f2f2;
}
h3.open a {
    background-position: 13px -25px;
}
 h3 + div {
    padding: 10px;
}

JavaScript

new jQueryCollapse($(".mi"), {
          open: function() {
            this.slideDown(150);
          },
          close: function() {
            this.slideUp(150);
          },
            accordion: true
        });