JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<li data-username="sip:[email protected]" class="contact-item closed">
          <ul class="actions"> <!-- { -->

              <li>
                <button role="new-call" class="call-action">Call</button>
              </li>

            <li class="act-options-other">
              <ul> 
                  <li>
                    <button role="new-message" class="sms-action">SMS</button>
                </li>
                <li> 
                  <button role="new-chat" class="chat-action">Chat</button> 
                </li>
              </ul>
            </li>

              <li> 
              <button class="show-act-options">ν</button>
              </li>

            </ul>  <!-- } -->
</li>
<li data-username="sip:[email protected]" class="contact-item closed">
          <ul class="actions"> <!-- { -->

              <li>
                <button role="new-call" class="call-action">Call</button>
              </li>

            <li class="act-options-other">
              <ul> 
                  <li>
                    <button role="new-message" class="sms-action">SMS</button>
                </li>
                <li> 
                  <button role="new-chat" class="chat-action">Chat</button> 
                </li>
              </ul>
            </li>

              <li> 
              <button class="show-act-options">ν</button>
              </li>

            </ul>  <!-- } -->
      </li>

 <li data-username="sip:[email protected]" class="contact-item closed">
          <ul class="actions"> <!-- { -->

              <li>
                <button role="new-call" class="call-action">Call</button>
              </li>

            <li class="act-options-other">
              <ul> 
                  <li>
                    <button role="new-message" class="sms-action">SMS</button>
                </li>
                <li> 
                  <button role="new-chat" class="chat-action">Chat</button> 
                </li>
              </ul>
           ...

CSS

html, body{
    min-height: 100%;
}

li{
    list-style-type: none;
}

.actions{
    float: left;
}


.dp_block{
    display: block !important;
}

.act-options-other {
    display: none;
}

.show-act-options.active {
    color: red;
}

JavaScript

/*toggle on menu on button click. toggle off on any other click outside of it*/

var count    = 0,
  options    = $('.act-options-other'),
show_options = $('.show-act-options');


/*when show_options and .actions are clicked,
document also (parent)gets clicked. the 
following two 'on click' events guarantee 
that the specified document click behaviour 
dont come from a click oneither .actions or
show-options*/

$(document).on(
    'click', 
    function(event) {
        if(count > 0){
            options.removeClass('dp_block');
            show_options.removeClass('active');
            count = 0;
        } else count++;
    }
);


$('.actions').on(
    'click', 
    function () {
        count = 0;
    }
);

show_options.on(
    'click', 
    function (event) {
        var target = $(event.target),
            targets_act_options_other = target.parents('.actions').children('.act-options-other');
        
        //remove classes from non target show_options and options
        show_options.not(target).removeClass('active');
        options.not(targets_act_options_other).removeClass('dp_block');
        
        
        //toggle classes on target show_options and options
        target.toggleClass('active');
        targets_act_options_other.toggleClass('dp_block');
    }
);