JSFiddle - React, Tailwind, and code Playground

by praveen_jegan

HTML

<!DOCTYPE html>
<html>
<body>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> 
</head>
     <body onload="window.resizeTo(600,600)">
<div id="header" class="uno" style="background-color:#ffffff;">
<div class="uno">
</div>
<input type="button" value="Pianifica Allenamento" onclick="location.href='index.html';"/>
<input type="button" value="Statistiche" onclick="location.href='index.html';"/>
<input type="button" value="Presenze" onclick="location.href='index.html';"/>
<input type="button" value="Varie Sez.SFW" onclick="location.href='index.html';"/>
</div>


<div class="ex">
<ul>
    <li><a href="#">Categoria1</a></li>
    <li><a href="#">Categoria2</a>
        <ul class="sub-menu">
            <li><a href="#">Esercizio1</a></li>
            <li><a href="#">Esercizio2</a></li>
        </ul>
    </li>
    <li><a href="#">Categoria3</a></li>
    <li><a href="#">Categoria4</a>
        <ul class="sub-menu">
            <li><a href="#">Esercizio1</a></li>
            <li><a href="#">Esercizio2</a></li>
        </ul>
    </li>
    <li><a href="#">Categoria5</a></li>
</ul>
</div>
<div class="tablewrap">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td rowspan="2"> Nome Esercizio </td>
    <td> Obiettivo 1:
    <td> Obiettivo <br>  tattico:
    <td> Durata: </td>
    </td>
  </tr>
  <tr>
    <td> Obiettivo 2: <br>
    <td> Obiettivo Coordinato: <br>
    <td> Tempo Effettivo: </td>
      </td>
  </tr>
  <tr>
    <td> Numero giocatori:<br>
      Materiale:<br>
      Descrizione: <br></td>
    <td colspan="3" align="center"> IMMAGINE DA INSERIRE </td>
  </tr>
    </tr>

    </td>

  <tr>
    <td colspan="5" align="center"> NOTE </td>
  </tr>
</table>
</div>

</body>
</html>

CSS

body { 
    background-color:#ffffff;
}
div.uno{
margin-top:10px;
margin-bottom:10px;
border-bottom:2px solid;
border-color:#00ff00;
vertical-align: middle;
}
*{font-family:"Georgia",Georgia,serif;}
div.ex {
    height:250px;
    width:150px;
    padding:10px;
    border:1px solid gray;
    margin-bottom:10px;
    float:left;
    text_color:#ffffff;

}
.tablewrap{
    vertical-align: middle;
    float:left;
    margin-left:20px;
}
input {
    padding: .5em;
    color: #ffffff;
    text-shadow: 1px 1px 1px #000;
    border: solid thin #882d13;
    -webkit-border-radius: .7em;
    -moz-border-radius: .7em;
    border-radius: .7em;
    -webkit-box-shadow: 2px 2px 3px #999;
    box-shadow: 2px 2px 2px #bbb;
    background-color: #b4ce1c;
    background-image: -webkit-gradient(linear, left top, left bottom,  from(#e9ede8), to(#ce401c), color-stop(0.4, #8c1b0b));
}

JavaScript

$(function(){

   //Hide all the sub menus
   $('.sub-menu').hide();

   $("li:has(ul)").click(function(){
      //Find the child ul and slideToggle
      $(this).children("ul").slideToggle();
   });
});