JSFiddle - React, Tailwind, and code Playground

by Wasim Kazi

HTML

<div id="cont">
<div class="box2" id="1"><h3>Basketball</h3></div>
<div class="widget2"><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" style="display: none; ">
            <ul class="leagues">
                                    <li class="even"><a href="#" class="league-145">Australian Open</a></li>
                            </ul>
            <div class="clear-both"></div>
        </div></div>
</div>
    </div>

CSS

div.box2 {
margin-bottom: 1px;
}

div.box2 h3 {
padding: 8px;
margin-bottom: 0;
background: #6EAB29;
border: 1px solid #DDD;
border-bottom: 0;
color: white;
position: relative;
font-size: 12px;
font-weight: bold;
cursor: pointer;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
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;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
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('box2cooki')) {
        var id = getCookie('box2cooki');
        //alert('#'+id);
      $('#' + id).next(widget2).slideDown(100);
      $('#' + id).closest('div').next().find('.inner').slideDown(100);
    } else {
        $(".widget2").hide();
        $(".inner").hide();
    }


    box2.click(function() {
        $(this).next(widget2).slideToggle(200);
        var box2ID = $(this).attr('id');
        setCookie('box2cooki', box2ID);
        //alert(box2ID);
    });
    //$(".inner").hide();
    $(".box").click(function() {
        $(this).next(".inner").slideToggle(200);
    });

    //alert(box2ID);
});