JSFiddle - React, Tailwind, and code Playground

by 76484

HTML

<div class="side-bar">
  <div class="menu">
    <div class="item"><a id="item1" href="#">Dynamically create submenu here</a></div>
    <div class="item">
      <a id="item2" href="#">Already created submenu here</a>
      <div class="sub-menu">
        <a href="#" class="sub-item">Sub item 1</a>
        <a href="#" class="sub-item">Sub item 2</a>
      </div>
    </div>
  </div>
</div>

CSS

.side-bar .menu .item .sub-menu{
    background: rgba(255, 255, 255, 0.1);
    display: none;
}

.side-bar .menu .item .sub-menu a{
    padding-left: 80px;
}

JavaScript

function get_all_the_values() {
  return $.ajax({
    url: '/echo/json',
    type: 'POST',
    data: {
      json: JSON.stringify(['Sub item 1', 'Sub item 2', 'Sub item 3'])
    }
  }).then(response => JSON.stringify(response));
}


$(function() {
  $('.menu').on('click', '.item', function() {
    $(this).find('.sub-menu').slideToggle();
  });


  $('#item1').click(async function() {
    if ($(this).parent().find('.sub-menu').length === 0) {
      const response = await get_all_the_values();
      const arr = JSON.parse(response);
      let elem = document.createElement("div");
      
      elem.className = "sub-menu";
      elem.id = "id1";
      
      for (var i = 0; i < arr.length; i++) {
        var anchor = document.createElement("a");
        anchor.className = "sub-item";
        anchor.href = "#";
        anchor.innerText = arr[i];
        elem.appendChild(anchor);
      }
      
      $(this).parent().append(elem);
      
      $(this).parent().find('.sub-menu').slideToggle();
    }
  });
});