JSFiddle - React, Tailwind, and code Playground

by Irvin Dominin

HTML

<a href='/contact' class='menuButton' id='contact'>KONTAKT</a>

<div class="messagepop pop">
    <p>popup message1</p>
</div> 

<a href='/contact2' class='menuButton' id='contact2'>BILETY</a>

<div class='messagepop pop'>
    <p>popup message 2</p>
</div>

JavaScript

function deselect(e) {
    e.next('.pop').slideFadeToggle(function () {
        e.removeClass('selected');
    });
}

$(function () {
    $('.menuButton').on('click', function () {
        if ($(this).hasClass('selected')) {
            deselect($(this));
        } else {
            $(this).addClass('selected');
            $(this).next('.pop').slideFadeToggle();
        }
        return false;
    });


});

$.fn.slideFadeToggle = function (easing, callback) {
    return this.animate({
        opacity: 'toggle',
        height: 'toggle'
    }, 'fast', easing, callback);
};