JSFiddle - React, Tailwind, and code Playground

HTML

<div id="footer">test
    <ul>
        <li><a href="#" id="country_link"><span id="label">Country: </span><span id="strong">United Kingdom</span></a>

        </li>
        <li><a href="#"><span id="strong">Support</span></a>

        </li>
    </ul>
</div>
<div id="country_slide">
    <a href="#" id="close">Close</a>
    <div class=".content"></div>
</div>

CSS

#country_slide {
    background-color: red;
    height: 30px;
    display:none
}
#close {
    float:right
}

JavaScript

$(function () {
    $('#close').click(function (e) {
        e.preventDefault();
        $('#country_slide').slideToggle();
    });

    $('#country_link').on('click', function (e) {
        e.preventDefault();
        var $link = $(this);
        // Exit if the data is loaded already
        if ($link.data('loaded') === true) {
            console.log('Not using Ajax.');
            $("#country_slide").slideToggle();
            return false;
        }

        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/echo/html/',
            timeout: 5000,
            beforeSend: function () {
                $("#country_slide .content").html('<p>Loading</p>')
            },
            success: function (data, textStatus) {
                console.log('Fecthed with Ajax.');
                $("#country_slide .content").html(data);
                $("#country_slide").slideToggle();
                // If successful, bind 'loaded' in the data
                $link.data('loaded', true)
            },
            error: function (xhr, textStatus, errorThrown) {
                alert('request failed');
            },
            complete: function () {
            },
        });
    });
});