JSFiddle - React, Tailwind, and code Playground

by Wasim Kazi

HTML

<div class="box2" id="1"><div class="text"><h3>Football</h3></div>
</div>
<div style="display: block;" class="widget2"> <div class="widget"><div class="box"><h3>Alemania</h3></div>
        <div style="display: none;" class="inner">
            <ul class="leagues">
                                    <li class="even"><span class="leaguetxt">Bundesliga</span></li>
                                    <li><span class="leaguetxt">Bundesliga 2</span></li>
                             </ul>
            <div class="clear-both"></div>
        </div>
    
        
    <div class="box"><h3>Argelia</h3></div>
        <div style="display: none;" class="inner">
            <ul class="leagues">
                                    <li class="even"><span class="leaguetxt">Primera División Argelia</span></li>
                            </ul>
            <div class="clear-both"></div>
        </div>
    
        
    <div class="box"><h3>Argentina</h3></div>
        <div style="display: none;" class="inner">
            <ul class="leagues">
                                    <li class="even"><span class="leaguetxt">Copa de Argentina</span></li>
                                    <li><span class="leaguetxt">Primera B Nacional</span></li>
                                </ul>
            <div class="clear-both"></div>
        </div>
  </div></div>
<div class="box2" id="1"><h3>Basketball</h3>
</div>
<div class="widget2" style="display: none; "><div class="widget"><div class="box"><h3>Australia</h3></div>
        <div class="inner" style="display:none; ">
            <ul class="leagues">
                                    <li class="even"><a href="#" class="league-145">Australian NBL</a></li>
                            </ul>
            <div class="clear-both"></div>
        </div></div>
</div><div class="box2" id="2"><h3>Tennis</h3>
</div>
<div class="widget2" style="display: none; "><div class="widget"><div class="box"><h3>Australia</h3></div>
        <div class="inner"...

CSS

div.box2 {
    margin-bottom: 0;
    background-color: #efefef ;
    height:31px;
    border: 1px solid #ddd;
    border-bottom: 0;
    color: #000;
    position: relative;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;  
}

div.box2:hover{
background-color: #fff ;
}
.disable { 
background-color: #2C2C2C !important;
color:#fff;        
}

div.box2 h3 {
padding: 8px;
margin-bottom: 0;
border: 1px solid #DDD;
border-bottom: 0;
position: relative;
font-size: 12px;
font-weight: bold;
cursor: pointer;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
div.box {
margin-bottom: 1px;
}

div.box h3 {
padding: 8px;
margin-bottom: 0;
background: red;
border: 1px solid #DDD;
border-bottom: 0;
color: white;
position: relative;
font-size: 12px;
font-weight: bold;
cursor: pointer;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}

JavaScript

$(document).ready(function() {

    $(".widget2").hide();
    $(".inner").hide();

    function getCookie(c_name) {
        var i, x, y, ARRcookies = document.cookie.split(";");
        for (i = 0; i < ARRcookies.length; i++) {
            x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
            y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
            x = x.replace(/^\s+|\s+$/g, "");
            if (x == c_name) {
                return unescape(y);
            }
        }
    }

    function setCookie(c_name, value, exdays) {
        var exdate = new Date();
        exdate.setDate(exdate.getDate() + exdays);
        var c_value = escape(value) + ((exdays === null) ? "" : "; expires=" + exdate.toUTCString());
        document.cookie = c_name + "=" + c_value;
    }
        
    var widget2 = $(".widget2");
    var box2 = $(".box2");
    if (getCookie('box2id') || getCookie('box1text')) {
        var text = getCookie('box1text');        
        var id = getCookie('box2id');
          //$('#' + id).addClass("active");
          $('#' + id).next().slideDown(600, function() {  
          $('.box:contains('+text+')').next('.inner').slideDown(500);
        });
    } else {
        $(".widget2").hide();
        $(".inner").hide();
    }

    box2.click(function() {
        $(this).next(widget2).slideToggle(200);
        $(".widget2").not($(this).next(widget2)).stop(true, false).slideUp();
        $(".box2").not($(this)).stop(true, false).removeClass("active");
        var box2ID = $(this).attr('id');
         $('.disable').removeClass('disable');
         $(this).addClass("disable");
        //$(".box2").removeClass("active");
        //$(this).removeClass("hover").addClass("active");
        setCookie('box2id', box2ID);        
      });
    
    $(".box").click(function() {
        $(this).next(".inner").slideToggle(200);
        var box1TX = $(this).text();
         setCookie('box1text', box1TX);         
    });
  
});