jQuery load into div then all links should be opened in that div + toggle function

Question

I'm new to jQuery & stackoverflow.

I've been trying to fix this for 2 days now, googling around and can't really figure it out - So it's time to reach out.

• I have a .main div for main content
• I have a #sidebar for a menu.

• On that menu i have a link on #thumbslink

  1. When I click #thumbslink
     • I want to load external div from "/project-single.html #project-single" into #siteloader
     • replace #siteloader with .main
  2. When I click #thumbslink again I want it to reverse

(1 & 2 works fine)

The problem (What doesn't work together right now)

• I want to open all links that's visible in #siteloader in the same div
• And at the same time use #thumbslink as a toggler (like #2).

Anyway here is my code:

HTML (rougly):

<div id="thumbslink">
<a href="#">THUMBS</a>
</div>

<div class="main">Main content</div>

<div id="siteloader"></div>

jQuery:

// LOAD #Project-single onClick #thumbslink in #siteloader

$(function() {
    $("#thumbslink").click(function() {
        $('#siteloader')
           .load('http://jacoberiksson/project-single.html #project-single');

    });

// LOAD all clicked links (a) in #siteloader

$("#siteloader").on("click", "a", function (e) {
    $("#siteloader").load($(this).attr("href"));
    e.preventDefault();
});

});

// TOGGLE #siteloader & .main onClick #thumbslink

$(function(){
    $("#thumbslink").on("click", function(){
        $("#siteloader").toggle('fade');
        $(".main").toggle('fade');

    });
});

Thanks!

Answer 1

<div>
<a href="#" id="thumbslink">THUMBS</a>
</div>

<div class="main">Main content</div>

<div id="siteloader">
    <a href="">If your external site is not in the same domain as your site then No. I would suggest you to use JSONP objects to send/receive between sites in different domain.
    </a><br/>
    <a href="">If it the same  then use ajax request
    </a>
</div>

jQuery

$("#siteloader").hide();

$("#thumbslink").click(function() {
        $('#siteloader').find('a').each(function() {
        $('#siteloader').append($(this).attr('href'));
    });
});


$(function(){
    $("#thumbslink").on("click", function(){
        if($('#siteloader').is(":visible")){
            $("#siteloader").hide('');
            $(".main").show('');
        }
        else{
            $(".main").hide('');
            $("#siteloader").show('');
        }
    });
});

JsFiddle