title: HTML main category dropdown selection and sub-category list
body: <p>I have seen other questions asked where <code>select</code> and <code>optgroup</code> were given, but where more CSS styling is needed, is there a way to show the sub-categories from a menu created using <code>radio inputs</code>?</p>
  
  <p>The snippet shows the menu animation that is required so <code>select</code> won't work here. I changed the HTML markup to <code>radio inputs</code>. Is it possible to toggle the associated sub-category div when the main-category is select?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".cat-dropdown .title :input").click(function() {
    var $menu = $(this)
      .parent()
      .siblings(".cat-dropdown-menu");
    if ($menu.height() &gt; 0) {
      closeMenu($menu);
    } else {
      openMenu($menu);
    }
  });
  $(".cat-dropdown-menu .cat-item").click(function() {
    var $menu = $(this).closest(".cat-dropdown-menu");
    closeMenu($menu);
    $menu
      .closest(".cat-dropdown")
      .find(".title span")
      .text($(this).text())
      .css("color", this.style.color);
  });
  
  function closeMenu($menu) {
    $list = $menu.children(".cat-list");
    $menu.closest(".cat-dropdown").toggleClass("closed");
    $menu.css("height", 0);
    $list.css("top", 0);
  }
  
  function openMenu($menu) {
    $list = $menu.children(".cat-list");
    $menu.closest(".cat-dropdown").toggleClass("closed");
    $menu.css({
      height: 75
    });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .cat-list input {
    display: none;
  }
  
  .sub-list {
    display: flex;
    flex-direction: column;
  }
  
  .main1 {
    border: 2px solid blue;
  }
  
  .main2 {
    border: 2px solid red;
  }
  
  .cat-dropdown {
    margin: 25px;
    text-align: left;
    color: #343c3f;
    border: 1px solid #a2acb0;
  }
  
  .cat-dropdown.closed .cat-dropdown-menu {
    margin-top: 0px;
  }
  
  .cat-dropdown.closed .cat-dropdown-menu .cat-item {
    height: 0px;
  }
  
  .cat-dropdown.closed .title {
    border-bottom: none;
  }
  
  .cat-dropdown.closed .title:after {
    margin-top: -16px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  
  .cat-dropdown .title {
    width: 100%;
    position: relative;
    height: 40px;
    padding: 12px;
    cursor: pointer;
    border-bottom: 1px solid #d9e1e4;
  }
  
  .cat-dropdown .title:after {
    display: block;
    content: "▾";
    position: absolute;
    right: 14px;
    margin-top: -16px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  
  .cat-dropdown .cat-dropdown-menu {
    position: relative;
    overflow: hidden;
    max-height: 200px;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-box-sizing: "border-box";
    -moz-box-sizing: "border-box";
    box-sizing: "border-box";
  }
  
  .cat-dropdown .cat-list {
    position: absolute;
    top: 0;
    width: 100%;
  }
  
  .cat-dropdown .cat-list .cat-item {
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #d9e1e4;
    padding: 0 12px;
    vertical-align: top;
    overflow: hidden;
    cursor: pointer;
    -webkit-transition: margin-top 0.5s, height 0.5s;
    -moz-transition: margin-top 0.5s, height 0.5s;
    transition: margin-top 0.5s, height 0.5s;
  }
  
  .cat-dropdown .cat-list .cat-item:hover {
    background-color: #d9e1e4;
    color: #343c3f;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="cat-dropdown closed"&gt;
    &lt;div class="edit"&gt;
      &lt;label class="title"&gt;
  &lt;input class="edit-input1" type="checkbox"&gt;&lt;span&gt; Choose...&lt;/span&gt;
  &lt;/label&gt;
      &lt;div class="cat-dropdown-menu"&gt;
        &lt;div class="cat-list" id="category"&gt;
          &lt;label class="cat-item" style="color:blue"&gt;
  &lt;input type="radio" name="cat1"&gt;Main 1&lt;/label&gt;
          &lt;label class="cat-item" style="color:red"&gt;
  &lt;input type="radio" name="cat2"&gt;Main 2&lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  Sub Category:
  &lt;div id="subcategory"&gt;
    &lt;div class="sub-list main1" for="cat1"&gt;
      &lt;input type="radio" name="sub1" value="opt1"&gt;main1 opt1
      &lt;input type="radio" name="sub1" value="opt2"&gt;main1 opt2
      &lt;input type="radio" name="sub1" value="opt3"&gt;main1 opt3
    &lt;/div&gt;
    &lt;div class="sub-list main2" for="cat2"&gt;
      &lt;input type="radio" name="sub2" value="opt1"&gt;main2 opt1
      &lt;input type="radio" name="sub2" value="opt2"&gt;main2 opt2
      &lt;input type="radio" name="sub2" value="opt3"&gt;main1 opt3
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://codepen.io/moofawsaw/pen/LmLZeM" rel="nofollow noreferrer">https://codepen.io/moofawsaw/pen/LmLZeM</a></p>