CODEWITHSUNDEEP
javascriptjquerytabs
mandrill
mandrill

Reputation: 1

Controlling visibility of 2 divs simultaneously

I'm trying to use a tabbed interface to display content on a website. The first set of divs is the content (text) and the second is an associated image in a div outside the div containing the text as follows:

<div id="side-img-container">
 <div class="side-img" id="image_1"><img src="image1.jpg" /></div>
 <div class="side-img" id="image_2"><img src="image2.jpg" /></div>
 <div class="side-img" id="image_3"><img src="image3.jpg" /></div>
 <div class="side-img" id="image_4"><img src="image4.jpg" /></div>
 <div class="side-img" id="image_5"><img src="image5.jpg" /></div>
</div>
<div id="content>
<ul class="tabs">
 <li><a href="#tab_1">Tab 1</a></div>
 <li><a href="#tab_2">Tab 2</a></div>
 <li><a href="#tab_3">Tab 3</a></div>
 <li><a href="#tab_4">Tab 4</a></div>
 <li><a href="#tab_5">Tab 5</a></div>
</ul>
<div class="tab_container">
 <div class="tab_content" id="tab_1">Content 1</div>
 <div class="tab_content" id="tab_2">Content 2</div>
 <div class="tab_content" id="tab_3">Content 3</div>
 <div class="tab_content" id="tab_4">Content 4</div>
 <div class="tab_content" id="tab_5">Content 5</div>
</div>
</div>

This uses the following Jquery to make the tabs work:

$(document).ready(function() {

//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {

    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute     value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });
});

Is there any way the above javascript can be added to/adapted so that the corresponding image tab is displayed when a content tab is displayed ie: tab_1 and image_1 etc. ?

Upvotes: 0

Views: 340

Answers (4)

Morph
Morph

Reputation: 1719

Bit quick and dirty from the top of my head:

var s = activeTab.attr('id');
var num = s.substr(4, 1);
var imgstr = "#image-" + num;

$(".side-img").hide();
$(imgstr).show();

Edit: You can use this anywhere in the tab click event handler. Edit 2: var s = etc Fix.

Upvotes: 0

Yi Jiang
Yi Jiang

Reputation: 50095

First of all, your HTML is invalid - you're closing <li> list items with </div> tags. You've also forgotten to close the quote surrounding the #content element's id attribute value.

The original JavaScript code isn't particularly efficient, so we might as well rewrite it. Using this code, you do not need each of the tab content to have a class attribute, which certainly lightens up the HTML quite a bit: 

// Select all of the tab contents, then hide them
// Cache elements that need to be reused
var tabContents = $(".tab_container, #side-img-container").children().hide(),
    tabs = $("ul.tabs li");

// Show the first tab's content, and add in the active class
tabs.first().addClass("active");
tabContents.filter(':first-child').show();

// Attach click event handler
tabs.click(function() {
    // Cache the clicked on tab element
    var $this = $(this),
        // Obtain the element index number
        activeTab = $this.index() + 1;

    // Only change tabs if the clicked tab isn't active
    if (!$this.hasClass('active')) {
        // Remove the 'active' class from the original anchor and add it to the current one
        $this.addClass('active').siblings().removeClass('active');
        // Hide all of the other tabs and fade in the active one
        tabContents.siblings().hide().filter(':nth-child(' + activeTab + ')').fadeIn();
    }

    return false;
});

See a simple demo of this here: http://jsfiddle.net/ND7nU/

Upvotes: 2

Khez
Khez

Reputation: 10350

Check this example on jsfiddle.net

Upvotes: 0

Prakash
Prakash

Reputation: 6602

Try this :

$('div.side-img').hide();
$('div.side-img:first').show();

$("ul.tabs li").click(function() {
    $('div.side-img').eq($(this).index()).show();
    // remaining code 
}

Upvotes: 1

Related Questions