Scooter Daraf Scooter Daraf - 5 months ago 29
HTML Question

Onclick maximize div on other divs

i want to maximize div over other divs BUT not minimize content of other divs . I mean the content stay as it is not minimized .

Im trying this

<div id="content">
<div id="containerleft">
<div id="box1" class="box">im left the content here to see if it minimized</div>
<div id="box2" class="box">im middle the content here to see if it minimized</div>
<div id="box3" class="box">im right the content here to see if it minimized</div>
</div>
</div>


And js code

$(".box").click(function(){

var clone = $(this).clone().addClass('active');
var parent = $(this).parent();
var pos = $(this).position();

$(this).append(clone);

console.log(pos);

clone.css({'position' : 'absolute', left: pos.left + 'px', top: pos.top + 'px'}).animate({
width: '80%',
height : '50%',
top: 0,
left: '10%'
},300);


});


this works perfectly with the div in the middle But not on other divs .

example if i click on right div , i want the div will maximize in its place and the other divs minimized to the left .

and if i click on left div the other will be minimized to the right.

the middle div is working good it shows in its place .
i want every div will show in its ordered place . the right will show in right , left in left , middle in middle.

Here is the jsfiddle demo

Thanks for your support .

IF its fixed with css it would be better.

Answer

Here's how you can do it with css.

$(".box").on('click',function(){
    $(".box").removeClass('active');
    $(this).addClass('active');
});
#content{
 width:450px;
 height:150px;
 display: -webkit-box;
 display: -ms-flexbox;
 display: box;
 display: flex;
}

.box{
  -webkit-box-flex: 1;
  -o-box-flex: 1;
  box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative;
  transition: all .3s;
  overflow:hidden;
}

.box>div{
    position: absolute;
    left: 0;
    max-width: 150px;
    top: 0;
    width: calc(450px - 40%);
    padding: 15px;
}

.box.active{
  -webkit-box-flex: 1 1 60%;
  -o-box-flex: 1 1 60%;
  box-flex: 1 1 60%;
  -ms-flex: 1 1 60%;
  flex: 1 1 60%;
}

#box1{
 background:pink;
}
#box2{
 background:gray;
}

#box3{
 background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div id="box1" class="box"><div>im right the content here to see if it minimized</div></div>
<div id="box2" class="box"><div>im right the content here to see if it minimized</div></div>
<div id="box3" class="box"><div>im right the content here to see if it minimized</div></div>
</div>

Comments