JSFiddle - React, Tailwind, and code Playground

by nju33

HTML

<div class="accordion-panel">
    <a href="#js_panel1" class="link">panel1</a>
    <div id="js_panel1">
       <ul>
           <li>panel11</li>
           <li>panel12</li>
           <li>panel13</li>
       </ul>
   </div>
   <a href="#js_panel2" class="link">panel2</a>
   <div id="js_panel2">
       <ul>
           <li>panel21</li>
           <li>panel22</li>
           <li>panel23</li>
           <li>panel24</li>
       </ul>
   </div>
    <a href="#js_panel3" class="link">panel3</a>
   <div id="js_panel3">
       <ul>
           <li>panel31</li>
           <li>panel32</li>
           <li>panel33</li>
       </ul>
   </div>
</div>

SCSS

.accordion-panel {
    width: 10em;
}

.accordion-panel > .link {
    background-color: #3c3c3c;
    color: #f8f8f8;
    width: inherit;
    text-align: center;
    text-decoration: none;
    padding: .5em 0;
    display: block;
    &:hover {
        color: darken(#f8f8f8, 20%);
    }
}

.accordion-panel > div {
    display: none;
    width: inherit;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

li {
    padding: .5em 0;
}

JavaScript

$(function() {
    $("a.link").on("click", function() {
        $self = $(this);
        if($self.hasClass("current")) {
           $self.next().slideUp(200)
               .end().removeClass("current");
        } else {
            $self.addClass("current");
            $('[id^="js_panel"]:visible').not($self.next()).slideUp(200);
            $self.next().slideDown(200);
        }
    });
});