JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div class="grids grids-flush">
    <div class="grid-1-4 news-home same-height-news lap-border-bottom mob-half lap-half phab-full">
        <div class="block-content toggle__trigger">
            <div class="content-title-and-icone">
                <div class="wrap-icone">
                    <div class="icone-news">	<span class="i-tutorial icone-position"></span>

                    </div>
                </div>
                <div class="content-title-news">
                    <div>	<span class="ttl-news">Nos derniers</span>

                    </div>
                    <div class="ttl-news--margin">	<span class="ttl-news">tutoriels</span>

                    </div>
                </div>
            </div>
        </div>
        <div class="toggle__content">
            <ul class="list-news">
                <li><span class="color-list-bull">•</span>[SolidWorks] Faire une MAJ dans une pièce seule	<span class="date-list-news">08/10/2015</span>

                </li>
                <li><span class="color-list-bull">•</span>[SolidWorks] Faire une MAJ dans une pièce seule	<span class="date-list-news">08/10/2015</span>

                </li>
            </ul>
            <div class="list-news-more">	
                <a class="link-more" href="#">
                    <span class="wrap-input-btn">
                        <i class="i-more-news wrap-icon-btn"></i>
                        <span class="relative-layout">
                            <span class="text-more">Voir plus</span>
                        </span>
                    </span>
                </a>
            </div>
        </div>
    </div>
    <div class="grid-1-4 news-home same-height-news lap-border-bottom mob-half lap-half phab-full">
        <div class="block-content toggle__trigger">
            <div class="content-title-and-icone">
                <div class="wrap-icone">
                    <div class="icone-news">	<span class="i-tutorial icone-position"></span>

                   ...

CSS

/** 
 * Afficher/Masquer 
 *
<div class="toggle">
	<div class="toggle__trigger"></div>
	<div class="toggle__content"></div>
</div>
 *
 */
.toggle {}
	.toggle__trigger {position:relative; cursor:pointer;}
	.toggle__trigger:before {content:""; position:absolute; top:50%; left:13px; margin-top:-3px; width:0; height: 0; border:0 solid transparent; border-width:8px 4px 0 4px; border-top-color:#FFF; transition:all 0.2s ease-out;}
	.toggle__content {overflow:hidden; transition:max-height 0.3s cubic-bezier(0.57, 0.06, 0.05, 0.95), opacity 0.4s cubic-bezier(0.17, 0.04, 0.03, 0.94);}
	
	/* Etat visible/non-visible */
	.js .is-hidden .toggle__trigger:before {transform:rotate(-90deg);}
	.js .is-hidden > .toggle__content:not(#foo) {max-height:0; opacity:0;}
	.js .is-visible > .toggle__content:not(#foo) {max-height:100em; opacity:1; transition:max-height 1s cubic-bezier(0.57, 0.06, 0.05, 0.95) 0.4s, opacity 1.2s cubic-bezier(0.17, 0.04, 0.03, 0.94) 0.4s;}


.news-home.is-visible .content-title-and-icone {color:tomato;}

JavaScript

// PAS BESOIN D'AJOUTER CA CHEZ NOUS, c'est modernizr qui s'en charge
$('body').addClass('js');


// On commence par ajouter la classe qui permet de masquer les éléments
$('.news-home').addClass('is-hidden');

// Au clic sur .toggle__trigger (on précise .news-home pour qu'il ne s'applique pas sur les éventuelles autres occurences)
$('.news-home > .toggle__trigger').on('click', function(e) {
    e.preventDefault();
    var $this = $(this);
	var $toggler = $(this).parent('.news-home');
	var $all = $('.news-home');
    
    // On masque tous les onglets ouverts
    $all.addClass('is-hidden').removeClass('is-visible');
    
    // On affiche l'onglet sur lequel on vient de cliquer
    $toggler.addClass('is-visible').removeClass('is-hidden');
   
});