How To Change Content Of Multiple Divs On Click

I am attempting to figure out how to change the content of two different, non-contiguous divs, when a link is clicked. I have some draft HTML and Javascript, and I suspect missing

Solution 1:

Try,

$(function () {
    $('#tabs-container div').hide().eq(0).show();
    $('#tabs-container-2 div').hide().eq(0).show();

    $('#tabs li').click(function () {
        $('#tabs-container div').hide()
        $('#tabs-container-2 div').hide()
        num = $('#tabs li').index(this);
        $('#tabs-container div').hide().eq(num).show();
        $('#tabs-container-2 div').hide().eq(num).show();
    });
});

DEMO

Solution 2:

Is this what you're after?

http://jsfiddle.net/GbaMx/16/

I added an id to each link, and when the link is clicked the repective content is toggled.

I grouped them into 2 classes for .c1 .c2 for content 1 and content 2

Solution 3:

Updates JSFiddle: http://jsfiddle.net/GbaMx/18/

Your Javascript was totally fine. However, you were trying to reference the tabs class, when there were no such classes defined. Thus, I had to update the HTML with ids of content-x to have a class of tabs.

Solution 4:

Try this

JQUERY CODE:

$(function () {
  $('#tabs-container div').hide();
  $('#tabs-container-2 div').hide();
  $('#tabs li a').on('click', function (event) {
    event.preventDefault();
    num = $(this).parent().index();
    $('#tabs-container div').eq(num).slideToggle();
    $('#tabs-container-2 div').eq(num).slideToggle();
  });
});

LIVE DEMO:http://jsfiddle.net/dreamweiver/GbaMx/22/

There were few things missing in your code, so i have just tuned it a bit.

Happy Coding :)

Solution 5:

Try this:

html

<ul id="tabs">
    <li><a id="link1" href="#">Link 1</a>
    </li>
    <li><a id="link2" href="#">Link 2</a>
    </li>
</ul>
<div id="tabs-container">
    <div id="content1" class="contents">Content forlink 1. Should display only when Link 1 is clicked.</div>
    <div id="content2" class="contents">Content forlink 2. Should display only when Link 2 is clicked.</div>
</div>

<p>Unrelated text is here. Text in this area is static and should display at all times.</p>

<div id="tabs-container-2">
    <div id="content1-2" class="contents">Additional content forlink 1. Should display only when Link 1 is clicked.</div>
    <div id="content2-2" class="contents">Additional content forlink 2. Should display only when Link 2 is clicked.</div>
</div>

javascript

$( document ).ready(function() {
    // hide tabs
     $('.contents').hide();

    $('#link1').click( function() {
        $('#content1,#content1-2').show();
        returnfalse;
    });
    $('#link2').click( function() {
        $('#content2,#content2-2').show();
        returnfalse;
    });
});

see demo: http://jsfiddle.net/Magicianred/BV2kS/1/

Enjoy your code