扩展和收缩元素

Question

My overall goal of this is to click on a and it expands to the full width of the page, the other 2 's would fadeOut. When the Active is then clicked it would go back to its initial state and the other 2 's would fadeIn.

I have created a JSFiddle here: http://jsfiddle.net/tJugd/3534/

HTML:

<div id="staff" class="slide" style="height:568px;">
<div class="staff1" data-hammer="[object Object]" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none; -webkit-transform-origin: 0px 0px 0px; opacity: 1; -webkit-transform: scale(1, 1);"></div>

<div class="staff2" data-hammer="[object Object]" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none; -webkit-transform-origin: 0px 0px 0px; opacity: 1; -webkit-transform: scale(1, 1);"></div>

<div class="staff3" data-hammer="[object Object]" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none; -webkit-transform-origin: 0px 0px 0px; opacity: 1; -webkit-transform: scale(1, 1);"></div>
</div>

CSS:

.staff1{
    width:33%;
    height:568px;
    background:red;
    float: left;
}
.staff2{
    width:34%;
    height:568px;
    background:blue;
    float: left;
}
.staff3{
    width:33%;
    height:568px;
    background:yellow;
    float: left;
}

JS:

$('div').click(function(){
    $(this).animate({width:'100%'})
})

Any help would be awesome!

Answer 1

HTML :

<div id="staff" class="slide" style="height:568px;">
<div class="staff staff1" data-hammer="[object Object]" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none; -webkit-transform-origin: 0px 0px 0px; opacity: 1; -webkit-transform: scale(1, 1);"></div>
<div class="staff staff2" data-hammer="[object Object]" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none; -webkit-transform-origin: 0px 0px 0px; opacity: 1; -webkit-transform: scale(1, 1);"></div>
<div class="staff staff3" data-hammer="[object Object]" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none; -webkit-transform-origin: 0px 0px 0px; opacity: 1; -webkit-transform: scale(1, 1);"></div>
</div>

CSS:

.staff {
    width:33%;
    height:568px;
    float: left;
    transition : width 0.3s;
}
.staff1{
    background:red;
}
.staff2{
    width:34%;
    background:blue;
}
.staff3{
    background:yellow;
}
.full {width: 100%}

JS:

$('div').click(function(){
    $(".selected").removeClass("selected").removeClass("full");
    $(this).addClass("selected");
    $(".staff:not(.selected)").fadeOut(400, function(){
        $(".selected").addClass("full")
    })
})

Should work

I added a common class to all three staff divs and add a class "full" with 100% width. As I added transition to .staff on width, it should be animated, finally, I put the code where the full comes full on fadeOut callback to prevent buggy stuff.

Answer 2

I would change the listener to only listen to div s with class staff in them. I'd get the class name and width. If the width is 100% it's already open so I just need to make all divs width 33%. Otherwise its 33% and should go to 100% while the rest go to 0%.

 $('div[class*="staff"]').click(function(){ var className=$(this).attr('class'); var width=$(this).attr('style'); width=width.substring(width.indexOf('width')+7); if(width!='100%;'){ $('div[class!="'+className+'"][class*="staff"]').each(function(){ $(this).animate({width:'0%'}); }); $(this).animate({width:'100%'}); } else{ $('div[class*="staff"]').each(function(){ $(this).animate({width:'33%'}); }); } }); 

 .staff{ width:100%; } .staff1{ width:33%; height:568px; background:red; float: left; } .staff2{ width:34%; height:568px; background:blue; float: left; } .staff3{ width:33%; height:568px; background:yellow; float: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <div id="staff" class="slide" style="height:568px;"> <div class="staff1" data-hammer="[object Object]" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none; -webkit-transform-origin: 0px 0px 0px; opacity: 1; -webkit-transform: scale(1, 1);"></div> <div class="staff2" data-hammer="[object Object]" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none; -webkit-transform-origin: 0px 0px 0px; opacity: 1; -webkit-transform: scale(1, 1);"></div> <div class="staff3" data-hammer="[object Object]" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none; -webkit-transform-origin: 0px 0px 0px; opacity: 1; -webkit-transform: scale(1, 1);"></div> </div>