Question

I’m looking at this site slideone and whenever you click on a link it loads the contents in the same container/div/whatever they are using. I was wondering if I could get something like this on my site but I don’t know how to go about doing this. Any help?

Answer 1

It’s a mix of hiding and showing content. When you interact with a link that loads another section, the following happens:

• A request is sent via ajax to the server, server sends back html.
• Fadeout parent’s content and append the HTML recieved from the server into a hidden div
• Fadein new content
• Look awesome

EDIT

Here is great link to get you started on how to do something like this really easily

EDIT 2:
Here is the jist of the jQuery work:

$(function(){
    $(".exposer").click(function(){
        var $ele = $(this);
        $ele.parent().siblings().hide('fade');
        if($(this).data('url') == undefined){
       $(this).siblings('.visContent').hide('slide')
           $(this).siblings('.hidContent').show('slide'); 
        }else{
            var url = $(this).data('url');
            $.ajax({
                url: '/echo/json',
                type: "GET",
                success:function(data){
                    var dt = new Date();
                    data = "You would have loaded HTML from " + url + ".<br /> This was loaded at " + dt;
                    //You would normally use the HTML from data to populate the html
                    //in this example a pre-built string will suffice
                    console.log(data,$ele, url);
               $ele.siblings('.visContent').hide('slide');
               $ele.siblings('.hidContent').append("<div class='ajaxload'>" + data + "</div>").addClass('ajaxload').show('slide');            
                },error:function(xhr, status){
                  alert('error loading page');
                }                    
            })
        }
    });
    $(".closer").live('click',function(){
        $(".ajaxload").hide('fade');
       var $mainp = $(this).parent().parent(); 
        $(this).parent().hide('slide');
        $(this).parent().parent().children('.visContent').show('slide');
                $(this).parent().parent().siblings('.childWrap').show('slide');
    });
});

​
I’ve created a fiddle for you to show how the basics of this would work. Here is the fiddle example I’ve built