JSFiddle - React, Tailwind, and code Playground

by Antindexer

HTML

<div id="main" role="main">

            <!-- Section #1 / Cover -->
            <section id="first" class="story" data-speed="8" data-type="background" data-offSetY="-432">        
                <article>
                    <h2>Tienda</h2>
                </article>
            </section>

            <!-- Section #2 / Keycloud -->
            <section id="second" class="point heads">
                <article>
                    <div class="text">
                        <h5>Nube de palabras. Aquí van las palabras, selecciónalas. Y tal y eso y se marcarán, ya tu sabeh.</h5>
                        <h6>Básicamente es cómo funciona este sistema para ver tus peaso motos.</h6>
                    </div>
                    <div class="btn-group-vertical">
                        <div><span>CATEGOR&Iacute;AS:</span></div>
                         <button type="button" class="selected btn btn-warning" name="newmotos">Motos nuevas</button>
                         <button type="button" class="selected btn btn-warning" name="usedmotos">Motos de ocasión</button>
                         <button type="button" class="selected btn btn-warning" name="spares">Recambios</button>
                         <button type="button" class="selected btn btn-warning" name="accessories">Accesorios</button>
                    </div>

                </article>
            </section>

            <!-- Section #3 / Bulletin -->
            <section id="third" class="point heads">
                <h4 class="line-divider">ANUNCIOS</h4>
                <article>

                    <div class="ad" data-category="newmotos">
                        <a href="images/ads/ad01/1.jpg" rel="lightbox-ad01"><img src="images/ads/ad01/1.jpg" /></a>
                        <a href="images/ads/ad01/2.jpg" rel="lightbox-ad01"></a>
                        <a href="images/ads/ad01/3.jpg" rel="lightbox-ad01"></a>
                        <a href="images/ads/ad01/4.jpg" rel="lightbox-ad01"></a>
            ...

JavaScript

// Hide all categories but newmotos when load website
$( document ).ready(function() {
    $( ".ad[data-category='usedmotos']" ).hide();
    $( ".ad[data-category='spares']" ).hide();
    $( ".ad[data-category='accessories']" ).hide();
    
    // Buttons marker
    $( "#second button" ).click(function() {
        $( this ).toggleClass('selected');
        $( this ).toggleClass('unselected');
        $( this ).toggleClass('btn-warning');
        $( this ).toggleClass('btn-default');
    });
    
    // Ads switcher
    $( "#second button" ).click(function() {
        var category = $( this ).attr( "name");
        $( ".ad[data-category="+category+"]" ).toggle( "slow" );
    });
    
});