Ajax Div Toggle Avoiding Reloading Content

I had a question regarding Ajax loading of html into a DIV. Ideally what I want is this: A toggle div with close button, which I have the code for here: http://jsfiddle.net/tymeJV/

Solution 1:

I edited the fiddle you posted adding the call to slideToogle() where appropriate. Also added a div element to hold the loaded html code.

<div id="country_slide">
    <a href="#" id="close">Close</a>
    <div class=".content"></div> <!-- This is the div I added -->
</div>

You can check the log messages in the console to verify that the code is doing what you expect. The URL for the Ajax call you were doing always returned an error so I changed to the URL that jsfiddle provides for testing: /echo/html/.

Here's the modified JS code:

$(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 () {
            },
        });
    });
});