JSFiddle - React, Tailwind, and code Playground

by Daniele Cedro

HTML

<link rel="stylesheet" href="http://beta.consulenzait.it/risorse/jquery.accordion.css">
<script src="http://beta.consulenzait.it/risorse/jquery.accordion.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="container">
   <form id="CMS_FORM" enctype="multipart/form-data" method="post" action="default.aspx" role="navigation">
  <div id="CMS_H1">
    <div class="resetfloat"></div>
  </div>
  <div id="CMS_Logo">
    <div class="resetfloat"></div>
  </div>
  <div id="CMS_H2">
    <div class="resetfloat"></div>
  </div>
  <div id="CMS_Menu">
    <div class="resetfloat"></div>
  </div>
  <div class="row" id="CMS_Contenuti">
    <div class="col-xs-12" id="CMS_ColCx">
      <div id="CMS_Dati">
          <div class="trasparenza">
        <h3>Menu Trasparenza</h3>
         <ul id="elenco_lista" data-accordion-group class="list-unstyled">
          <li data-accordion> <span data-control>Disposizioni generali</span>
            <ul class="list-unstyled" data-content>
              <li class=""><a href="/cms_trasparenza/default.aspx?2*0*1">Programma per la Trasparenza e l'Integrità</a></li>
              <li><a href="/cms_trasparenza/default.aspx?3*0*1">Attestazioni OIV o struttura analoga</a></li>
              <li data-accordion> <span data-control>Atti generali</span>
                <ul class="list-unstyled" data-content>
                  <li><a href="/cms_trasparenza/default.aspx?5*0*1">Riferimenti normativi su organizzazione e attività</a></li>
                  <li><a href="/cms_trasparenza/default.aspx?6*0*1">Atti amministrativi generali </a></li>
                  <li><a href="/cms_trasparenza/default.aspx?7*0*1">Statuti e leggi regionali</a></li>
                  <li><a href="/cms_trasparenza/default.aspx?8*0*1">Codice disciplinare e codice di condotta</a></li>
                </ul>
              </li>
              <li data-accordion> <span data-control>Oneri informativi per cittadini e...

CSS

[data-accordion] > [data-control]:after {
    background: url("http://beta.consulenzait.it/risorse/down.png") no-repeat scroll center top / 50% auto rgba(0, 0, 0, 0);
}
[data-control], [data-content] > * {
    border-bottom: 0 none;
    color:#444;
}
[data-accordion] > [data-control] {
    cursor:pointer;
    }
#elenco_lista {
    font-family:'Roboto', sans-serif;
    background:#d5e3eb;
    padding:10px;
    }
#elenco_lista > li > a {
    display:block;
    width: 100%;
    color:#337ab7 ;
}
.open[data-accordion] > [data-control]:after {
    background-position: center bottom;
}
.sololink a:hover {
    color: #fff !important;
}
.trasparenza h3 {
    font-family:'Roboto', sans-serif;
    font-weight:300;
    color:#4072B4;
}
.trasparenza span, .sololink {
    background: inherit;
    border: inherit;
    color: inherit;
    display: block;
    font: inherit;
    margin: 0;
    outline: medium none;
    width: 100%;
    border: 0 none;
}
.sololink {
    padding:10px;
}
.sololink, #elenco_lista li{
    border-bottom:1px solid #62bbe9;
}
.sololink > a, #elenco_lista > .open li > a {
    text-decoration: none;
    width:100%;
    display: block;
}
.sololink, #elenco_lista li:last-child {
    border-bottom: 0 transparent;
}
#elenco_lista > .open > li > a {
    padding:0;
}
#elenco_lista > li:hover, #elenco_lista > li:hover > a, #elenco_lista > li [data-control]:hover  {
    background: #4679BD;
    color:#fff;
}
.open > span {
    background: url("http://beta.consulenzait.it/risorse/bg_accordion.png") repeat-x transparent !important;
    color:#333 !important;
    border-right:1px solid #62bbe9;
}
.open a, .open .open a {
    padding-left: 10px;
}
#elenco_lista > .open li{
    background: #bfdfee;
    padding-left:20px;
    border-left:1px solid #62bbe9;
 }

#elenco_lista > .open .open [data-content] > li{
    background: #fff !important;
 }

JavaScript

$(document).ready(function() {
    $('#elenco_lista [data-accordion]').accordion({
      singleOpen: true
    });
  });