JSFiddle - React, Tailwind, and code Playground

by Wasim Kazi

HTML

<div class="box2" id="1"><h3>Basketball</h3>
</div>
<div class="widget2" style="display: block; "><div class="widget"><div class="box"><h3>Australia</h3></div>
        <div class="inner" style="display: block; ">
            <ul class="leagues">
                                    <li class="even"><a href="/baloncesto/australian-nbl/" 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: block; "><div class="widget"><div class="box"><h3>Australia</h3></div>
        <div class="inner" style="display: block; ">
            <ul class="leagues">
                                    <li class="even"><a href="/baloncesto/australian-nbl/" class="league-145">Australian Open</a></li>
                            </ul>
            <div class="clear-both"></div>
        </div></div>
</div>

CSS

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

div.box2 h3 {
padding: 8px;
margin-bottom: 0;
background: #6EAB29 url(../img/top-navigation-active.png) repeat-x top;
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 url(../img/top-navigation-active.png) repeat-x top;
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(){
  
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;
    }
   
   
 if(getCookie('box2'))
  {
    //$('#'+ getCookie('box2')).attr('id').hide();
     alert("hi"); 
  }
    else{
        alert("hiiiiiii");    
    }
    
    
    var $widget2=$(".widget2");
    $widget2.hide();
    $(".box2").toggle(function(){
        $(this).next(".widget2").slideDown(200);
       }, function(){
        $(this).next(".widget2").slideUp(200);
        var openBoxID = $(this).attr('id');
        setCookie('box2', openBoxID); 
      });
    
    $(".inner").hide();
    $(".box").toggle(function(){
        $(this).next(".inner").slideDown(200);
    }, function(){
        $(this).next(".inner").slideUp(200);
    });

});