JSFiddle - React, Tailwind, and code Playground

by Guruprasad Rao

HTML

<div id="my-tabs">
    <ul>
        <li class="tab"><input class="txt" type="text"/><a href="#Home-1">Home 1</a></li>
        <li class="tab"><input class="txt" type="text"/><a href="#Home-2">Home 2</a></li>
        <li class="tab"><input class="txt" type="text"/><a href="#Home-3">Home 3</a></li>
    </ul>
    <div id="Home-1">
        <p>Home Content 1</p>
    </div>
    <div id="Home-2">
        <p>Home Content 2</p>
    </div>
    <div id="Home-3">
        <p>Home Content 3</p>
    </div>
</div>

CSS

input[type=text]
{
    display:none;
    width:120px;
}
a
{
    display:block;
}

JavaScript

$(function() {
    var tabs = $( "#my-tabs" ).tabs();
    tabs.find( ".ui-tabs-nav" ).sortable({
           axis: "x",
           stop: function() {
              tabs.tabs( "refresh" );
          },
          select: function(event, ui) {
              alert("PRESSED TAB!");
          }
     });
     $('.tab').on('dblclick',function(){
         $(this).find('input').toggle().val($(this).find('a').html()).focus();
         $(this).find('a').toggle();
     });
    
    $('.tab').on('keydown blur','input',function(e){
        if(e.type=="keydown")
        {
           if(e.which==13)
           {
               $(this).toggle();
               $(this).siblings('a').toggle().html($(this).val());
           }
           if(e.which==38 || e.which==40 || e.which==37 || e.which==39)
           {
               e.stopPropagation();
           }
        }
        else
        {
            if($(this).css('display')=="inline-block")
            {
                $(this).toggle();
                $(this).siblings('a').toggle().html($(this).val());
            }
        }
    });
});