JSFiddle - React, Tailwind, and code Playground

by tiagocarvalho

HTML

<div id="accordion">
<div class="acordeonItem">
    <div class="itemHeader"><input class="checkboxDrillDown"  id="0" type="radio" name="x">title</div>
    <div class="itemtContent">config content</div>
</div>
<div class="acordeonItem">
    <div class="itemHeader"><input class="checkboxDrillDown"  checked="checked" id="1" type="radio" name="x">title</div>
    <div class="itemtContent"><input type="text" id="x"></div>
</div>
<div class="acordeonItem">
    <div class="itemHeader"><input class="checkboxDrillDown"  id="2" type="radio" name="x">title</div>
    <div class="itemtContent">config</div>
</div>
</div>

CSS

#accordion
{
width:320px;
background:#fff;    
}

#accordion .acordeonItem{margin:5px;}

#accordion .itemHeader
{
    width:300px;            
    height:28px;
    background:#F3F3F3;
    vertical-align:middle;
    display:table-cell;
    padding:4px;
    color:#333;
    font-weight:bold;
}

#accordion .itemtContent
{
    background:#FFF;
    padding:10px;
}



.itemtContent{display:none;}

JavaScript

$(document).ready(function() {
    
    $('input[type=radio].checkboxDrillDown').live('change', function() { 
        cbSelect($(this));
    });
    
      $('.itemHeader').live('click', function() { 
        
        $(this).find('input[type=radio]').attr("checked",'checked');
        $(this).find('input[type=radio]').change(); // check the radion inside div
    });
    
    // on load 'click' in checked radio to open default option
    $('.checkboxDrillDown:checked').change(); 
});


function cbSelect(obj){
            
    $(obj).parent().parent().parent().find('input[type=radio]').each(function(){
        
        if ($(this).attr('id') != $(obj).attr('id') && $(this).parent().next().css('display') != 'none')
        {            
            // close
            $(this).parent().next().slideUp("slow");
        }
    });
    
   
    if ($(obj).parent().next().css('display') == 'none')
    {
         // open   
        $(obj).parent().next().slideDown("slow");
    }
       
    $(obj).blur();
    try
    {
        $(obj).parent().next().find('input').get(0).focus(); // focus on first input
    }catch(err){;}
}