JSFiddle - React, Tailwind, and code Playground

by sinju

HTML

<div>
   <label>Accordion Tab 1</label>
   <div class="contents">asdfasdfasdfasdf</div>
</div>
<div>
   <label>Accordion Tab 2</label>
   <div class="contents">ewqqwerqwerqwerqewrr</div>
</div><div>
   <label>Accordion Tab 1</label>
   <div class="contents">asdfasdfasdfasdf</div>
</div>
<div>
   <label>Accordion Tab 2</label>
   <div class="contents">ewqqwerqwerqwerqewrr</div>
</div><div>
   <label>Accordion Tab 1</label>
   <div class="contents">asdfasdfasdfasdf</div>
</div>
<div>
   <label>Accordion Tab 2</label>
   <div class="contents">ewqqwerqwerqwerqewrr</div>
</div><div>
   <label>Accordion Tab 1</label>
   <div class="contents">asdfasdfasdfasdf</div>
</div>
<div>
   <label>Accordion Tab 2</label>
   <div class="contents">ewqqwerqwerqwerqewrr</div>
</div><div>
   <label>Accordion Tab 1</label>
   <div class="contents">asdfasdfasdfasdf</div>
</div>
<div>
   <label>Accordion Tab 2</label>
   <div class="contents">ewqqwerqwerqwerqewrr</div>
</div><div>
   <label>Accordion Tab 1</label>
   <div class="contents">asdfasdfasdfasdf</div>
</div>
<div>
   <label>Accordion Tab 2</label>
   <div class="contents">ewqqwerqwerqwerqewrr</div>
</div><div>
   <label>Accordion Tab 1</label>
   <div class="contents">asdfasdfasdfasdf</div>
</div>
<div>
   <label>Accordion Tab 2</label>
   <div class="contents">ewqqwerqwerqwerqewrr</div>
</div><div>
   <label>Accordion Tab 1</label>
   <div class="contents">asdfasdfasdfasdf</div>
</div>
<div>
   <label>Accordion Tab 2</label>
   <div class="contents">ewqqwerqwerqwerqewrr</div>
</div><div>
   <label>Accordion Tab 1</label>
   <div class="contents">asdfasdfasdfasdf</div>
</div>
<div>
   <label>Accordion Tab 2</label>
   <div class="contents">ewqqwerqwerqwerqewrr</div>
</div><div>
   <label>Accordion Tab 1</label>
   <div class="contents">asdfasdfasdfasdf</div>
</div>
<div>
   <label>Accordion Tab 2</label>
   <div class="contents">ewqqwerqwerqwerqewrr</div>
</div><div>
   <label>Accordion Tab 1</label>
   <div...

CSS

label {
    cursor: pointer;
    font-weight: bold;
}
.contents {
    color: #888;
    display: none;
}

JavaScript

$("label").on('click', function() {
    $("div.contents").slideUp();
    var activeDiv = $(this).next("div.contents");
    activeDiv.slideDown(); 
    $(window).scrollTop(activeDiv.offset().top)
});