CODEWITHSUNDEEP
jquery
Craig Jonathan Kristensen
Craig Jonathan Kristensen

Reputation: 737

jQuery expand DIV on click and replace contents

I am trying to create an expandable rollout when the user clicks on a tab.

It is basically 2 rows of tabs, each with their own colour and when the user clicks on one of them a hidden DIV should animate out. I Don't assume that this would be to hard to do, but the problem comes when the user clicks on a different tab when one is already open. Then the new content has to overtake the existing contents place.

this is what I have so far; http://jsfiddle.net/craigzilla/W3afW/

                     The 4 images represent what should happen
                      when you click on tab 01, 02, 03 and 08

Upvotes: 1

Views: 3597

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

jsFiddle demo

$(document).ready(function() {
    var $cont;    
    function tgl_conts(){
        $('.content').stop().animate({height: 0},1200);
        $cont.stop().animate({height:210},1200);
    }
    
    $('.tab').on('click',function(){
        var tabClass=$(this).attr('class').split(' ')[1];
        $cont = $('.'+tabClass+':not(.tab)');
        var h = ($cont.height() === 0) ? tgl_conts() :  ( $cont.stop().animate({height: 0},1200) );  
    });

});

Take care!!! I removed all your ID's (CSS also), and added separated classes for your duplicates:

.turquoise and .turquoise2
same for .pink .pink2 'cause you have 2 elements of each, and we have to distinguish them!

P.S: nice usability! great expression, nice idea bro!

EDIT
Added setup for 'speed' (animation time) and easings for the jQuery UI library:

demo with easing

Upvotes: 2

Lix
Lix

Reputation: 47966

Ok...So basically what you want to do is have a <div> element within each one of your tabs. When the user clicks one of the tabs, jQuery will make sure that no other "pop out" div elements are visible and then display the corresponding div.

I'll take 3 tabs as an example - 

<div class="tab" id="pink">
    <img src="http://placehold.it/160x160" width="160" height="160" />
    <span class="tab_text">TITLE 01</span>
    <div class="pop-out">Some pink information</div>
</div>
<div class="tab" id="turquoise">
    <img src="http://placehold.it/160x160" width="160" height="160" />
    <span class="tab_text">TITLE 02</span>
    <div class="pop-out">Some turquoise information</div>
</div>
<div class="tab" id="yellow">
    <img src="http://placehold.it/160x160" width="160" height="160" />
    <span class="tab_text">TITLE 03</span>
    <div class="pop-out">Some yellow information</div>
</div>

Notice that they every time I use an id attribute they are each unique. The id attribute should always have a unique value as opposed to the class attribute which you can see can have the same values. class="pop-out"

  • pop-out will be our way of identifying all of the pop-out div elements
  • when the user clicks the tab, we'll add an additional sel class (short for selected). So that we can track what div was last open (if there was any) and make sure to close it before opening a new one.

Now, lets say we want the trigger to be the entire tab. Anywhere the user clicks on it will trigger the pop-out.

$(".tab").on('click',function(){
  $("div.pop-out.sel").fadeOut().removeClass('sel'); // this will hide the last selected div and remove its selected class
  $(this).find("div.pop-out").fadeIn().addClass('sel'); // this will display the div of the element the user clicked and add the selected class.
}

Obviously you can substitute any animation you desire.

Now we can also track what tab is open by using -

$("div.pop-out.sel").closest("div.tab");

This will return the parent of the pop-out div that is currently being displayed. Remember to test if a selected div actually exists first :)

Upvotes: 0

Related Questions