JSFiddle - React, Tailwind, and code Playground

by nomelnomel

HTML

<div class="onglets_liste">
  <h2 id="onglets_titre_0" class="onglets_titre selected">
    <a href="#">Descriptif</a>
  </h2>
  <h2 id="onglets_titre_1" class="onglets_titre">
    <a href="#">Jour par Jour</a>
  </h2>
  <h2 id="onglets_titre_2" class="onglets_titre">
    <a href="#">Infos</a>
  </h2>
</div>

<div class="onglets_contenu selected" id="onglets_contenu_0"><div><div class="features-circuit"><ul>
        <li class="bullet-type">atypique</li>
        <li class="bullet-duration">12 jours </li>
        <li class="bullet-period">toute l’année</li>
       </ul></div>
<p>&nbsp;</p>

<p><span class="titreaufil">Au fil des jours</span></p>

<p>&nbsp;</p>

<p><span class="spip_document_1275 spip_documents spip_documents_center">
<img src="local/cache-vignettes/L359xH171/jpg_mexican_food_low_res-0f579.jpg" alt="" style="" width="359" height="171"></span></p>

<p><span class="titrejour">Jour 1&nbsp;: </span> <span class="titrelieu"> CANCUN ARRIVÉE</span></p>

<p><span class="titrejour">Jour 2&nbsp;: </span> <span class="titrelieu"> CANCUN – EK BALAM VISITE – CENOTE X’CANCHE – EK BALAM</span></p>

<p><span class="titrejour">Jour 3&nbsp;: </span> <span class="titrelieu"> EK BALAM / TOUR GASTRONOMIQUE - CHICHEN ITZA</span></p>

<p><span class="titrejour">Jour 4&nbsp;: </span> <span class="titrelieu"> CHICHEN ITZA VISITE – IZAMAL – MÉRIDA</span></p>

<p><span class="titrejour">Jour 5&nbsp;: </span> <span class="titrelieu"> MÉRIDA - PARC NATIONAL DE CELESTUN – MERIDA – DÎNER MEXICAIN</span></p>

<p><span class="titrejour">Jour 6&nbsp;: </span> <span class="titrelieu"> MÉRIDA – UXMAL – MUSÉE DU CACAO – MUNA</span></p>

<p><span class="titrejour">Jour 7&nbsp;: </span> <span class="titrelieu"> MUNA – ATELIER CUISINE TRADITIONNELLE – CAMPECHE</span></p>

<p><span class="titrejour">Jour 8&nbsp;: </span> <span class="titrelieu"> CAMPECHE - CALAKMUL - XPUJIL</span></p>

<p><span class="titrejour">Jour 9&nbsp;: </span> <span class="titrelieu"> MÉRIDA – COBA -...

CSS

.onglets_bloc {
    position: relative;
    width: 100%;
    clear: both;
}

h2.onglets_titre.selected {

    height: 33px;
    background: url(/squelettes-dist/images/layout/back-onglets.png) repeat-x;
    z-index: 11;
    top: -2px;
    margin: 1px 1px -2px 0px;
    border-bottom-width: 0px;
    cursor: default;

}

 h2.onglets_titre {
    height: 33px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 6px;
    background: url(https://www.mexique-voyages.com/squelettes-dist/images/layout/back-onglets.png) repeat-x;
    color: black;
    position: relative;
    top: -1px;
    display: inline;
    float: left;
    overflow: hidden;
    cursor: pointer;
    margin: 1px 2px 1px 0px;
    padding: 3px 16px;
    z-index: 11;
    white-space: nowrap;
    text-align: center;
    font-weight: normal;
    font-size: 97%;
    width: 20%;
    line-height: 30px;
}

h2.onglets_titre > a {

    text-decoration: none;
    height: 22px;
  

}

.onglets_bloc .onglets_contenu.selected {

    display: block;
    overflow: hidden;

}

.onglets_bloc .onglets_contenu {
    display: none;
    clear: both;
    border: 2px solid #346EFE;
    z-index: 10;
    position: relative;
    top: -3px;
    padding: 0.6em;

}


.features-circuit {

    border: 1px solid #ccc;
    background: #eee;
    float: left;
    display: block;
    width: 100%;
    height: 48px;

}

JavaScript

var onglet_get = get_onglet(window.location);
	if(onglet_get && (this==document)) clic_onglet(onglet_get);
	// clic vers une note dans un onglet
	jQuery('.spip_note['+cs_sel_jQuery+'name^=nb], .spip_note['+cs_sel_jQuery+'id^=nb]').each(function(i) {
		jQuery(this).click(function(e){
			var href = this.href.substring(this.href.lastIndexOf("#"));
			jQuery(href).parents('.onglets_contenu').eq(0).montre_onglet();
			return true;
		});
	});

function clic_onglet(liste) {
	var onglets = liste.split(',');
	for (var i=0; i<onglets.length; i++)
		jQuery('#onglets_titre_'+onglets[i]).click();
}

function get_onglet(url) {
 tab = url.search.match(/[?&]onglet=([0-9,]*)/) || url.hash.match(/#onglet([0-9,]*)/);
 return tab==null?onglet_actif:tab[1];
}