JSFiddle - React, Tailwind, and code Playground

by dafin defandaky

HTML

<div id='db-toggle-wrap'>
<div id="toggle-container">
 <h2>Toggle Trigger 1</h2>
 <div class="toggle-content">
  Isi toggle letakkan disini
    </div>
    <h2>Toggle Trigger 2</h2>
    <div class="toggle-content">
  Isi toggle letakkan disini
    </div>
    <h2>Toggle Trigger 3</h2>
    <div class="toggle-content">
  Isi toggle letakkan disini
    </div>
    <h2>Toggle Trigger 4</h2>
    <div class="toggle-content">
  Isi toggle letakkan disini
    </div>
    <h2>Toggle Trigger 5</h2>
    <div class="toggle-content">
  Isi toggle letakkan disini
    </div>
</div>
</div>

CSS

#db-toggle-wrap{width:300px;padding:5px;margin:30px auto;background-color:#333;}
#toggle-container {
  text-align:left;
  width:100%;
  margin:0 auto;
}

#toggle-container h2 { background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAB8CAYAAAB+DADzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABA9JREFUeNrsmt9Lk1EYx89+OBWn02k6HAhCEARCYgT9AV5EUFdDEILAi24MRxdhmERRIEVBEIFBEAy66iZvEqLAy7pQoatAEYJISYc/mU6nfb/jPePdnNs577tdJOeBr7p355zPec553uc9rzye2dlZoWghqN9SFIpY1zPQPPQL+tDb2/tTZTCPArgHeghda25u9jU2Noqamhrh9/tzDVKplEin02J9fV3s7e0t4NIL6A0mkXECDkNP6+rqhtra2kQ4HBYej6esJ7u7u2J1dVWsra3R8zjg0zrgC9DH9vb2rkgkIpzY5uYm4WJra+sJ4PdVwJegL52dnUF66cYymYxYWVkRyWTyFeC37d95C9qehT5Fo9FgS0uLODo6ciWv1yu4YnBgeG5ubuQkj33Qt46Ojr5ynsbj8WyA+Xy+7OeJiYmS7Rl4i4uLDLQr8Pxzoccj8LJPxVNCQ6GQaG1tzUqlPVaRs3wNzwN2cBAaxe0iDg8Py4qe1tbWioaGhqxU+rAdxudWDtnBA01NTWc4oMoghabShwKDzYf5Q2aBQTlzJ6baj0knEAicx3L3EFwPXcaFqoNpSEgMtn6CzwFaLwOh2mAGGhMUwV1yb+02Pj6ed8vYjYFlvz45OSk2NjaYp4+1HRsby/vMe5tMvxXRx8DyliGk0Ai1Zp7XlplKcTWCBGe4xIUN7LdMOWPbYitTDGx9ThO8zJk6DSzd/T84OOCvv0yZEaz7H50HQiKRyNv/WCym3JfP7p2dnWdZjzGrJcyk29r4ssZA4p5KsM5qMW/DZiRpihGpmoHY1h5Iqv3YZ39/fxtdvkrwWyxBRnUApymTpxPYezyhUhL8gxf4RbXA9BYrlULzR/ZcTbuH9R/APgdU91onc1l7+xLe/i58HvPCLexB2edroZVrzzERvN/R9EGpM9dzROsd+/HV7bkLUDp1Ed4u555URdreReM0ZjrK20XlSFsKCi1YR55l1XP1TR5VsN/1unsuUzB+80wdA3Rb902iG3rMgwI9lyoFtLTE/QQw4eYVRk5gELrKQ0OuMyZhCzYu5ZSl6VKvLzrgYm8aPus1JwktAZTUGcBp6M7LPwB0NIDH6XHHrRmwARuwARuwARuwARuwARuwARuwARuwARuwARuwARuwAdvBDv9DnzPH/yg39Vw2M/Vc2nZ66rl0rWL1XLqqWD2XE1WknsupKl7PpWoVr+fSsYrWc+mYq3ouHatoPZeOVbWeSwf8f9ZzuTFX9Vxu8zZsRiYQ1nONuA2kcmbV/WTruSSY9VzDiGRfNcFW+WS2nkuCZT3XDWawanlb8Xoujb11V8+lq2L1XIWVL+9wT/dgdtWo57oOb9MngWmmnsvUc8k3DVPPZcAGbMAGbMCnDPxPgAEAVEgit2OkrP4AAAAASUVORK5CYII=") no-repeat scroll 10px 7px #900;
  color:#fff;
  cursor:pointer;
  display:block;
  font:bold 24px Helvetica,Arial,sans-serif;
  height:24px;
  outline:0 none;
  margin:1px 0;
  padding:10px 10px 10px 50px;
}

#toggle-container h2.active {
 ...

JavaScript

$(document).ready(function(){
 $(".toggle-content").hide(); //posisi awal konten toggle tidak ditampilkan, hapus baris ini jika konten akan ditampilkan sejak awal
 $("#toggle-container>h2").click(function(){ $(this).toggleClass("active").next().slideToggle("slow");
 });

});