Nested beautiful select

Nested beautiful select

by nomorepls

HTML

<div class="container">
<div class="nested-select-box w-100">
  <div class="nested-select-button">
    <p class="nested-select-title">
      Account
    </p>
    <span class="nested-select-title-icon"></span>
  </div>
  <div class="nested-select-wrapper" style="display: none;">
    <div class="nested-select" executer="on_change_select">

      <label>
        <input title="Accounting and legal services" value="1565142000000891539" type="radio" name="nested-select-hidden-radio">
        <span>Accounting and legal services</span>
      </label>



      <label>
        <input title="Advertising agencies" value="1565142000000891341" type="radio" name="nested-select-hidden-radio">
        <span>Advertising agencies</span>
      </label>



      <a class="nested-cell">Advertising And Marketing</a>
      <div>



        <label>
          <input title="Advertising agencies" value="1565142000000891341" type="radio" name="nested-select-hidden-radio">
          <span>Advertising agencies</span>
        </label>



        <a class="nested-cell">Adwords - traffic</a>
        <div>



          <label>
            <input title="Adwords - traffic: Charters and general search" value="1565142000003929177" type="radio" name="nested-select-hidden-radio">
            <span>Adwords - traffic: Charters and general search</span>
          </label>



          <label>
            <input title="Adwords - traffic: Distance course" value="1565142000007821291" type="radio" name="nested-select-hidden-radio">
            <span>Adwords - traffic: Distance course</span>
          </label>



          <label>
            <input title="Adwords - traffic: Events" value="1565142000003929189" type="radio" name="nested-select-hidden-radio">
            <span>Adwords - traffic: Events</span>
          </label>



          <label>
            <input title="Adwords - traffic: Practices" value="1565142000003929165" type="radio" name="nested-select-hidden-radio">
            <span>Adwords -...

CSS

.container{
    width: 200px;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
  }
  
  .nested-select-box{
      font-family: Arial, Helvetica, sans-serif;
      display: block;
      position: relative;
      width: 100%;
      height: fit-content;
      cursor: pointer;
      color: #2196f3;
      height: 40px;
      font-size: small;
      /* z-index: 2000; */
  }
  
  .nested-select-box .nested-select-button{
    border: 1px solid #2196f3;
      position: absolute;
      width: calc(100% - 20px);
      padding: 0 10px;
      min-height: 40px;
      word-wrap: break-word;
      margin: 0 auto;
      overflow: hidden;
  }
  
  .nested-select-box.danger .nested-select-button{
      border: 1px solid rgba(250, 33, 33, 0.678);
  }
  
  .nested-select-box .nested-select-button .nested-select-title{
      padding-right: 25px;
      padding-left: 25px;
      width: calc(100% - 50px);
      margin: auto;
      height: fit-content;
      text-align: center;
      vertical-align: middle;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
  }
  
  .nested-select-box .nested-select-button.selected .nested-select-title{
      bottom: unset;
      top: 5px;
  }
  
  .nested-select-box .nested-select-button .nested-select-title-icon{
      position: absolute;
      height: 20px;
      width: 20px;
      top: 10px;
      bottom: 10px;
      right: 7px;
      transition: all 0.5s ease 0s;
  }
  
  .nested-select-box .nested-select-button.active .nested-select-title-icon{
      -moz-transform: scale(-1, -1);
      -o-transform: scale(-1, -1);
      -webkit-transform: scale(-1, -1);
      transform: scale(-1, -1);
  }
  
  .nested-select-box .nested-select-button .nested-select-title-icon::before,
  .nested-select-box .nested-select-button .nested-select-title-icon::after{
      content: "";
      background-color: #2196f3;
      position: absolute;
      width: 70%;
      height: 2px;
      transition: all 0.5s ease 0s;
    ...

JavaScript

function on_change_select(e){
    alert(e.value, e.title, e.option, e.select);
}

$(document).ready(()=>{
    // NESTED SELECT

    $(document).on('click','.nested-cell',function(){
        $(this).next('div').toggle('medium');
    });

    $(document).on('change','input[name="nested-select-hidden-radio"]',function(){
        const parent = $(this).closest(".nested-select");
        const value = $(this).attr('value');
        const title = $(this).attr('title');
        const executer = parent.attr('executer');
        if (executer) {
            const event = new Object();
            event.value = value;
            event.title = title;
            event.option = $(this);
            event.select = parent;
            window[executer].apply(null, [event]);
        }
        parent.attr('value',value);
        parent.parent().slideToggle();
        const button = parent.parent().prev();
        button.toggleClass('active');
        button.addClass('selected');
        button.children('.nested-select-title').html(title);
    });

    $(document).on('click','.nested-select-button',function(){
        const button = $(this);
        let select = button.parent().children('.nested-select-wrapper');

        if(!button.hasClass('active')){
            select = select.detach();
            if(button.height() + button.offset().top + $(window).height()*0.4 > $(window).height()){
                select.insertBefore(button);
                select.css('margin-top','-44vh');
                select.css('top','0');
            }else{
                select.insertAfter(button);
                select.css('margin-top','');
                select.css('top','40px');
            }
        }
        select.slideToggle();
        button.toggleClass('active');
    });
});