JSFiddle - React, Tailwind, and code Playground

by xaliber

HTML

<h1>HIED N SEEK MADNEZZ</h1>
<h2>The jQuery way</h2>
<div class="tombol toggler">Pencet akuh</div>
<div class="hidden toggler">Akuh tersembunyi</div>

<h2>The CSS way #1</h2>
<div tabindex="0" class="tombol csser">Pencet akuh</div>
<div class="hidden csser">Akuh tersembunyi</div>

<h2>The CSS way #2</h2>
<a href="#kebuka" name="kebuka" class="tombol csserdua">Pencet akuh</a>
<div id="kebuka" class="hidden csserdua">Akuh tersembunyi</div>

CSS

/* Ini style gak penting biar bagusan dikit */
body { text-align:center; margin: 0 100px; font-family: sans-serif; font-size:12px; }
h1 { font-size:200%; margin: 1.25em 0 0 0; }
h2 { font-size:150%; margin: 1em 0; }
.tombol { display:inline-block; padding: 2px 10px; color:#000; text-decoration:none; background: #eee; border:1px solid #aaa; cursor: pointer; }

/* Ini yang CSS way #1, di .tombol butuh tabindex=0 */
.hidden.csser { display:none }
.tombol:focus ~ .hidden.csser { display:block; }

/* Ini yang CSS way #2, harus pake ID dan ada anchor tambahan biar gak lonact */
.hidden.csser2 { opacity:0; }
.hidden.csser2:target { opacity:1; }

JavaScript

$(document).ready(function(){
    $(".hidden.toggler").hide();
    $(".toggler").click(function(){
        $(this).next().slideToggle()
    })
})