Question

I’m new to jQuery but am hoping to replace a <div> with another that contains a slideshow when I click on a link. The problem with my code however is that when I click the link, the <div> I want to load isn’t showing. Instead I just see div.slidesContainer for example.

My HTML:

<div id="leftText">
  <h2>Heading.</h2>
  <p>Text. <a href="/" id ="startSlide" %>'Learn more.'</a></p>
</div>
<div id="slide">
<div class="slides_container">
  <div>
    <h1>Slide heading.</h1>
      <p>Slide text.</p>
  </div>
</div>
</div>

My jQuery:

$(function(){
    $("a#startSlide").click(function(){
        $('div#leftText').replaceWith('div#slide');
        return false;
    });
});

Here’s a jsFiddle if it’ll help: http://jsfiddle.net/HR43b/

Answer 1

You have to pass a selector, not a string:

$(function() {
    $("a#startSlide").click(function() {
        $('div#leftText').replaceWith($('#slide'));

        $('#slide').css('visibility', 'visible');
        return false;
    });
});

Demo: http://jsfiddle.net/HR43b/3/