JSFiddle - React, Tailwind, and code Playground

by Hugo Vale Pereira

HTML

<div class="wrapper">
      <div id="details" class="Close">
        <summary> Sample</summary>
        <ul>
          <li>
            <input type="radio" checked/>
            <label>Label 1</label>
          </li>
          <li>
            <input type="radio" />
            <label>Label 2</label>
          </li>
          <li>
            <input type="radio" />
            <label>Label 3</label>
          </li>
        </ul>
      </details>
    </div>

CSS

.wrapper {
      width: 300px;
      height: 300px;
      background-color: #ecf0f1;
    }
    ul{
          -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0;
    }
    #details {
      outline: none;
      background-color: #95a5a6;
      cursor: pointer;
    }
    #details > ul{
      padding-left: 20px;
    }
    #details > ul li{
      transition: all 0.3s linear;
      -webkit-transition: all 0.3s linear;
      opacity: 1;
      max-height: 50px;
    }
    summary {
      outline: none;
      background-color: #95a5a6;
    }
    #details.Close summary:before{
      content: '\25BC'
    }
    #details summary:before{
      content: '\25BC'
    }
    #details.Close > ul li{
      opacity: 0;
      max-height: 0;
    }

JavaScript

$(document).ready(function(){
    $("#details").click(function(){
        $("#details").toggleClass("Close");
    });
});