JSFiddle - React, Tailwind, and code Playground

by Gonzalo Guevara

HTML

<a href="#" data-navtrigger="blockOne" class="hidden-lg hidden-md hidden-sm">Link 1</a>

<a href="#" data-navtrigger="blockTwo" class="hidden-lg hidden-md hidden-sm">Link 2</a>.
<div class="blockOne" data-navtarget="blockOne">
     <h2>Content 1</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</div>
<div class="blockOne" data-navtarget="blockTwo">
     <h2>Content 2</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae rerum error fuga sapiente? Harum molestias aliquid assumenda iure explicabo eligendi sunt quod? Itaque ad placeat reprehenderit laboriosam harum vero similique.</p>
</div>

CSS

.blockTwo, .blockOne {
    display: none;
}

JavaScript

var App = function () {

    var tempo, body;
    var Init = function () {

        body = $('body');

        $(window).resize(function () {
            clearTimeout(tempo);
            tempo = setTimeout(showonlyone, 500);
        });

        
        showonlyone();

    };


    //funcions
    var showonlyone = function () {

        console.log('Executing now !!!');
        var mobileClass = "small-device";
        var desktopClass = 'desktop-device';
        var windowWidth = getWindowWidth();

        if (windowWidth < 769) {

            body.addClass(mobileClass);
            body.removeClass(desktopClass);

            $('a[data-navtrigger]').click(function (e) {
                e.stopPropagation();
                var triggerTag = $(this);
                var triggerName = $(this).attr("data-navtrigger");
                var activo = true;
                var activeClase = 'activoo';

                console.log('triggerName: ' + triggerName);

                $('a[data-navtrigger]').each(function (index) {
                    if ($(this).attr("data-navtrigger") == triggerName) {
                        if (!$(this).hasClass(activeClase)) {
                            $(this).addClass(activeClase);
                        } else {
                            activo = false;
                            $(this).removeClass(activeClase);
                        }
                    } else {
                        $(this).removeClass(activeClase);
                    }
                });


                $('[data-navtarget]').each(function (index) {

                    console.log('triggerName Dentro: ' + triggerName);

                    if ($(this).attr("data-navtarget") == triggerName && activo) {
                        $(this).slideDown(250);
                    } else {
                        $(this).slideUp(250);
                    }

                });

            });

        } else if (windowWidth > 768) {

           ...