CODEWITHSUNDEEP
javascriptjqueryjquery-ui
js111
js111

Reputation: 1314

Toggle Two Separate Divs with jquery Tabs

I'm using the below to create a tabbed system.

My problem is that in addition to the tabs switching out the tab content (currently has 'Lorum Ipsum') below it, I also need them to toggle the images just above them in the dom.

When a user clicks one of the other tabs, it will switch the content AND the image at the same time.

Basic working Codepen here, minus the image part: http://codepen.io/cssjockey/pen/jGzuK

JS

$(document).ready(function(){

    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    })

})

HTML

<div class="container">    
   <div class="img-switch">
     <div id="tab-1" class="tab-content"><img src="#"></div>
     <div id="tab-2" class="tab-content current"><img src="#"></div>
   </div>

        <ul class="tabs">
            <li class="tab-link current" data-tab="tab-1">Tab One</li>
            <li class="tab-link" data-tab="tab-2">Tab Two</li>
            <li class="tab-link" data-tab="tab-3">Tab Three</li>
            <li class="tab-link" data-tab="tab-4">Tab Four</li>
        </ul>

        <div id="tab-1" class="tab-content current">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
        <div id="tab-2" class="tab-content">
             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div id="tab-3" class="tab-content">
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </div>
        <div id="tab-4" class="tab-content">
            Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>

    </div><!-- container -->

Upvotes: 1

Views: 64

Answers (1)

Codeinator
Codeinator

Reputation: 719

In your example you are using the same id more the one time.
e.g. id="tabl-1" or id="tab-2"

Give the images an extra id and change it in your js part.

See: http://codepen.io/anon/pen/LGQxEe

 <div id="img-tab-1" class="tab-content"><img src="https://pbs.twimg.com/profile_images/1137733055/asd-dot_normal.png"></div>
 <div id="img-tab-2" class="tab-content current"><img src="https://pbs.twimg.com/profile_images/3251986873/d21652dc07a281c96dd2cd8b37311788_normal.png"></div>


$(document).ready(function(){

    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
        $("#img-"+tab_id).addClass('current'); // See this line
    });
});

Upvotes: 2

Related Questions