Question

A little new to JQuery, I’m trying to have multiple links that open different related content into the same container.

JSFiddle

Answer 1

You can use data-* synatx of HTML5 to do it:

HTML:

<a class="link" data-link="first" href="#">link 1</a>
<a class="link" data-link="second" href="#">link 2</a>
<a class="link" data-link="third" href="#">link 3</a>

<div class="linkdetails" data-link="first" >content 1</div>
<div class="linkdetails" data-link="second" >content 2</div>
<div class="linkdetails" data-link="third" >content 3</div>
​

Javascript:

$('.link').toggle(function() {
    $('.linkdetails[data-link=' + $(this).data('link') + ']').animate({
        width: '200px'
    }, 300);


}, function() {
    $('.linkdetails[data-link=' + $(this).data('link') +']').animate({
        width: '0px'
    }, 300);

});​

JSFiddle DEMO