jQuery load html specific div into webpage

Question

having a bit of a issue

got four links when clicked i want to to load in content from an external html page into a div called content which slides down and shows the content from the external html page, but I want to use the href from the links to load in specific div tags from the external html page.. I'm nearly there just missing the final part.. I cant seem to use my variable inside my jquery load statement..

this is what ive got so far..

    $("#services a").click(function(){
     var href = $(this).attr("href");
      console.log(href)
      $('#content').slideToggle(function(){
       $("#content").load("services.html" + href); 
      });
    return false;
    });

also if anyone could point me how to slide the content div back when selecting a different link and then show that content for that link.. would be great..

thanks guys..

Answer 1

Supposing the href is correct and is the same as a selector, you're missing a space:

$("#services a").click(function(){
     var href = $(this).attr("href");
     $('#content').slideToggle(function(){
         $("#content").load("services.html " + href); 
                      //                  ^^^ space needed here 
     });
     return false;
});

this is because the correct syntax for load() is

$("#content").load("services.html #IdOfelementToLoad"); 
//    ^^                ^^       ^         ^^
//  container         filename  space    selector for filter

Documentation