JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<section id="pages">
                                        <div class="page home eased-move">
                                            <div class="page-flags">
                                                <a href="#" class="flag-fr"></a>
                                                <a href="#" class="flag-en"></a>
                                            </div>
                                            <div class="triangle" data-name="accueil"> </div>
                                            <div class="stitch"> </div>
                                            <div class="trishadow"> </div>
                                            <div class="block optimize"></div>
                                            <a href="#" id="homepage" class="clickthrough" data-name="accueil">home</a>
                                                <div class="contents medical-contents">
                                                    This is fancy toggle accordion<div class="clearfix"></div>
                                                </div>
                                            <a href="#"><h1 class="clickthrough vertifit"> </h1></a>
                                            <div class ="impressions vertifit clickthrough">
                                                <p></p>
                                                <small></small>
                                            </div>
                                            
                                        </div>
                                        <div class="page competences eased-move">
                                            <div class="triangle" data-name="nos competences"> </div>
                                            <div class="trishadow"> </div>
                                            <div class="block optimize">
                                                <a href="#" class="clickthrough" data-name="nos competences">comp</a>
                  ...

CSS

.page .contents {
    background-color: #fafafa;
    border: 1px solid #dddddd;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 5px 0 0 0 ;
    padding: 20px;
}

.page.home{
    display: inline-block;
    float: left;
    position: relative;
    text-align: center;
    min-width: 100px;
    height: 100%;
    border: 1px solid green;
}

.page.competences{
    display: inline-block;
    float: left
    position: relative;
    text-align: center;
    min-width: 60px;
    height: 100%;
    border: 1px solid green;
}

.page.equipe{
    display: inline-block;
    float: left;
    position: relative;
    text-align: center;
    min-width: 60px;
    height: 100%;
    border: 1px solid green;
}

.page.actualities{
    display: inline-block;
    float: left;
    position: relative;
    text-align: center;
    min-width: 60px;
    height: 100%;
    border: 1px solid green;
}

.page.contact{
    display: inline-block;
    float: left;
    position: relative;
    text-align: center;
    min-width: 60px;
    height: 100%;
    border: 1px solid green;
}

JavaScript

$(".page").each(function(){
    $(this).find(".contents").hide();
});

var temp = "";

$(".page").each(function(){
    
    $(this).find(".clickthrough").click(function() {
        
       // alert(temp + " ===== " + $(this).html());
        $('.clickthrough').removeClass('active').next().slideUp('slow'); 
        if (temp !=  $(this).html())
         $(this).toggleClass("active").next().stop(true, true).slideToggle("slow");
        
         temp = $(this).html();
        //return false;
    });
});