JSFiddle - React, Tailwind, and code Playground

by mahfidzmayanto

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
<script type="text/javascript" src="http://mahfidzmayanto.googlecode.com/files/jMenu.js"></script> 
<center><h1>SILAHKAN KLIK MENU UNTUK MELIHAT EFFEC</h1></center>
<div class="accordian">
    <ul>
        <li>Judul Menu 1</li>
        <li>Isi tampilan judul menu 1</li>
        <li>Judul menu 2</li>
        <li>isi tampilan Judul menu 2</li>
        <li>Judul menu 3</li>
        <li>isi tampilan judulmenu 3</li>
    </ul>
</div>

CSS

.accordian {
     width: 400px;
     margin: 50px auto;
 }
 
 .accordian li {
     list-style-type: none;
     padding: 0 5px;
 }
 
 .dimension {
     height: auto;
 }
     
 .even, .odd {
     font-weight: bold;
     height: 27px;
     padding-top: 3px;
     padding-left: 10px;
 }
     
 .even {
     border: 1px solid #d8d8d8;
     background-color: #ececec;
 }
     
 .odd {
     border: 1px solid black;
     background: #333;
     color: white;
 }