JSFiddle - React, Tailwind, and code Playground

by paocemalin

HTML

<div id="accordeon_multiple_ouverture"> 
    <!--
	<h3><a>Mes sélections et recherches</a></h3>
  <div>
   			<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Mes sélections</a></li>
		<li><a href="#tabs-2">Mes recherches</a></li>
	</ul>
	<div id="tabs-1">
    
    	<table width="100%" border="1px" bordercolor="#2294d5" cellspacing="0" cellpadding="3px">
            <tr>
            <th scope="col">Date</th>
            <th scope="col">Région</th>
            <th scope="col">Ville</th>
            <th scope="col">Dép.</th>
            <th scope="col">Enseigne</th>
            </tr>
        <tr>
            <td>29/06/2012</td>
            <td>Bretagne</td>
            <td> Quiberon</td>
            <td>56</td>
            <td><a href="index_fichedescriptive.html">Les sables blancs</a></td>
        </tr>
        <tr>
            <td>14/07/2012</td>
            <td>Provence alpes cote d'azur</td>
            <td>Barcelonnette</td>
            <td>04</td>
            <td>Les noeuds du vermeuil</td>
        </tr>
        </table>
		
       

        
	</div>
	<div id="tabs-2">
		
         <table width="100%"border="1px" bordercolor="#2294d5" cellspacing="0" cellpadding="3px">
            <tr>
            <th scope="col">Date recherche</th>
            <th scope="col">Nom de la recherche</th>
            <th scope="col">Accédez à la recherche</th>
            </tr>
        <tr>
            <td>29/06/2012</td>
            <td>Bretagne Quiberon</td>
            <td>Cliquez ici</td>
        </tr>
        </table>
        
	</div>
</div>
  </div>
  <h3><a>Mes réservations</a></h3>
  <div>
   		
        <div id="content">
        <table width="100%" border="1px" bordercolor="#2294d5" cellspacing="0" cellpadding="3px">
  <tr>
  	<th scope="col">Date de réservation</th>
    <th scope="col">N° de réservation</th>
    <th scope="col">Enseigne</th>
    <th scope="col">Ville</th>
    <th scope="col">Date d'arrivée</th>
  </tr>
  <tr>
  	<td>12/07/2012</td>
    <td><a href="#"...

CSS

#accordeon_multiple_ouverture.ui-accordion .ui-accordion-header a {
	display: block;
	padding:5px;
	margin:0 0 8px 0;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-transform: uppercase;
	background:#F7902C;
	border:0;
}
#accordeon_multiple_ouverture.ui-accordion-icons .ui-accordion-header a {
}
#accordeon_multiple_ouverture.ui-accordion .ui-accordion-content {
	padding:10px;
	border-top: 0;
	border-bottom: solid 1px #ccc;
	margin:-8px 0 10px 0;
	position: relative;
	top: 1px;
	overflow: auto;
	display: none;
	zoom: 1;
	background: #f0f0f0;
}
#accordeon_multiple_ouverture .ui-helper-reset {
	font-size: 13px;
 font-family:;
	list-style: none;
	line-height: none;
}
#accordeon_multiple_ouverture .ui-widget-content {
	color:#606060;
	border:0;
	background:#fff;
	border-radius:0px;
	padding:10px;
}
#accordeon_multiple_ouverture .ui-state-hover a, #accordeon_multiple_ouverture .ui-state-hover a:hover {
	color: #fff;
	text-decoration: none;
}
#accordeon_multiple_ouverture.ui-accordion .ui-accordion-header .ui-icon {
	position: absolute;
	left: 10px;
	top:7px;
	margin-top: 0;
}
#accordeon_multiple_ouverture .ui-state-default .ui-icon {
	background-image: none;
}
#accordeon_multiple_ouverture .ui-icon-triangle-1-e {
	background-position: 0;
}
#accordeon_multiple_ouverture .ui-icon-triangle-1-s {
	background-position:0;
}
#accordeon_multiple_ouverture .ui-state-active .ui-icon {
	background-image:none;
}
#accordeon_multiple_ouverture .ui-state-hover .ui-icon, #accordeon_multiple_ouverture .ui-state-focus .ui-icon {
/*background-image: url(puce-active.png);*/
}
#accordeon_multiple_ouverture .ui-icon {
	width: 20px;
	height: 20px;
	background-image:url(puce.png);
}
#accordeon_multiple_ouverture .ui-icon {
	display: block;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
}
#accordeon_multiple_ouverture .ui-state-active, #accordeon_multiple_ouverture .ui-widget-content #accordeon_multiple_ouverture .ui-state-active,...

JavaScript

$(function() {
		$("#fd_acc_mo, #accordeon_multiple_ouverture, #fd_acc_mo2").addClass("ui-accordion ui-accordion-icons ui-widget ui-helper-reset")
  .find("h3")
    .addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom")
    .hover(function() { $(this).toggleClass("ui-state-hover"); })
    .prepend('<span class="ui-icon ui-icon-triangle-1-e"></span>')
    .click(function() {
      $(this)
        .toggleClass("ui-accordion-header-active ui-state-active ui-state-default ui-corner-bottom")
        .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end()
        .next().toggleClass("ui-accordion-content-active").slideToggle();
      return false;})
    .next().addClass("ui-accordion-content  ui-helper-reset ui-widget-content ui-corner-bottom")
      .hide();
	});