CODEWITHSUNDEEP
jquery
CodeyMonkey
CodeyMonkey

Reputation: 739

jQuery: Load Div content into another div?

I have multiple hidden divs on the page each holding different content, when I click a link on the page e.g.

<a href="#contentone" class="clicky">Load content one</a>
<a href="#contenttwo" class="clicky">Load content two</a>

<div id="contentone">Some content here to be loaded into another div</div>
<div id="contenttwo">Some content here to be loaded into another div</div>

<div id="slider">
  This content to be replaced by content from links/hidden divs
</div>

Currently I'v got this setup so it loads the content from an external source, but i'd prefer it to populate the slider with content hidden on the page (As above).

My current jquery is below, would love this this to be converted to work within hidden divs on the page opposed to external files.

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(function () {
    $(".clicky").click(function () {
                var url = this.href;
                var e = $("#slider");
                e.load(url, function() {
                    e.animate({width: "show"}, 500);
                });
                return false;
    });
});
});//]]>  

</script>

Upvotes: 2

Views: 11613

Answers (1)

xdazz
xdazz

Reputation: 160963

You don't need to use .load.

$(function () {
    $(".clicky").click(function () {
        var content_id = $(this).attr('href');
        $('#slider').hide().html($(content_id).html()).show(500);
        return false;
    });
});

THE WORKING DEMO.

Upvotes: 5

Related Questions