Question

I’m trying to load content from wordpress pages into a div on a custom template using links.

I have one div that is hidden, and should be displayed with slideDown when content is loaded into it.

I have several links to different pages that I want to be loaded into this one div by onClick, or something similar.

Example:

Lets say I have the following links:

– Link 1 (home)

– Link 2 (about)

– Link 3 (contact)

If a visitor clicks these links something like this should happen:

Click link 2 –> load into div –> div gets displayed with slideDown
or similar.

Click link 3 –> previous loaded content fades out and content of link
2 fades in

Click link 2 (again) –> similar action as by click og link 2…

Click link 1 –> clears div and hides it by slideUp or similar.

If Link 2 or 3 is active, and the user clicks the same link again –>
similar action as by click of Link 1

I have found some bits of code to help me on the way, but I’m not quite there yet.
Heres what I have so far:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
      $('#navigationMenu a').click(function() { // When a menu item is selected
            $('#maincontent').load($(this).attr('href')); // Load its linked page into the div
            return false; // And prevent it following the link
      });
});

function toggleSlider() {
    if ($("#maincontent").is(":visible")) {
        $("#sec-content").animate(
            {
                opacity: "0"
            },
            600,
            function(){
                $("#maincontent").slideUp();
            }
        );
    }
    else {
        $("#maincontent").slideDown(600, function(){
            $("#sec-content").animate(
                {
                    opacity: "1"
                },
                600
            );
        });
    }   
}

</script>

I have found this code in related posts here on SO, and this makes me load the content into the div with slideUp/slide/down functionality.
BUT it closes the div by click on link 3 (in the example), so I’ll have to click the link again to load it once more.
And the home link, Link 1, doesn’t do what I want yet.

Hope someone with a little more knowledge about this can help me out here.
Is it at all possible to do?

Thanks!

—- Edited code 02/08/13 —-

<script type="text/javascript">

$(function() {
      $('#navigationMenu a').click(function() { // When a menu item is selected
            $('#maincontent').load($(this).attr('href')); // Load its linked page into the div
            return false; // And prevent it following the link
      });
});

var lastData;
$(function () {
    $("a").click(function(event) {
        loadData($(this).attr("href"));
        event.preventDefault();
    });
});

function loadData(data) {
    if(lastData == data) {
        $("#maincontent").slideUp();
    } else {
        $("#maincontent").html(data);
        $("#maincontent").slideDown();
    }
    lastData = data;
}

</script>

The result can be seen at http://tobba.org/no

Answer 1

You could try having a function that says: When a link is clicked, see if it was the last link clicked. If so, then slideUp(). If not, then get the data to go in there, and then once the data is available, fill the box and slideDown.

This example might get you halfway, you’ll still need to use $.get or $.load to get the data you want. NOTE: lastData is declared outside of the scope of the function so that it doesn’t lose its value when the function ends:
http://jsfiddle.net/turiyag/9na6K/

function loadData(data) {
    if(lastData == data) {
        $("#dataview").slideUp();
    } else {
        $("#dataview").html(data);
        $("#dataview").slideDown();
    }
    lastData = data;
}