Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<title>JS Bin</title>
</head>
<body>
  <div id="container">
    <div id="left" style="width: 30%;">
      <div class="close">X</div><br>
      <div class="title">Left</div>
      <div class="list">
          Details
      </div>
    </div>
    
    <div id="middle">
        <div class="close">X</div><br>
        <div class="title">Middle</div>
        <div class="list">
          Detalii
      </div>
    </div>
    
    <div id="right">
        <div class="close">X</div><br>
        <div class="title">Right</div>
        <div class="list">Detalii</div>
    </div>
  </div>
</body>
</html>
 
*{
    margin: 0px;
    padding: 0px;
}
body, html {
    height: 100%;
    width: 100%;
}
#container {
    height: 100%;
    width: 100%;
    background-color: #ffd56c;
    padding: 1px;
    text-align: center;
}
#left{
    margin-top: 50px;
    height: 50%;
    margin-left: 2%;
    background-color: black;
    float: left;
    font-size: 16px;
    color: #FFF;
}
#middle{
    margin-top: 50px;
    height: 50%;
    width: 30%;
    margin-left: 2%;
    background-color: green;
    float: left;
    color: #FFF;
    font-size: 16px;
}
#right{
    margin-top: 50px;
    height: 50%;
    width: 30%;
    margin-left: 2%;
    background-color: blue;
    float: left;
    font-size: 16px;
    color: #FFF;
}
.close {
    background-color: red;
    display: inline-block;
    float: right;
    width: 25px;
    height: 25px;
    border-radius: 30px;
}
}
 
$('.list').hide();
$('.close').hide();
var currentObj = null;
var widthVal = false;
$('#left').click(function () {
  currentObj = this;
    if (widthVal === false) {
        $('#middle').hide('fade', 300);
        $('#right').hide('fade', 300, function () {
            $('#left').find('.list').show();
            $('#left').find('.close').show();
            $('#left').animate({
                width: "96%",
                opacity: 1
            }, 1000);
        });
        widthVal = true;
    }
});
$('#middle').click(function () {
  currentObj = this;
    if (widthVal === false) {
        $('#left').hide('fade', 300);
        $('#right').hide('fade', 300, function () {
            $('#middle').find('.list').show();
            $('#middle').find('.close').show();
            $('#middle').animate({
                width: "96%",
                opacity: 1
            }, 1000);
        });
        widthVal = true;
    }
});
$('#right').click(function () {
  currentObj = this;
    if (widthVal === false) {
        $('#left').hide('fade', 300);
        $('#middle').hide('fade', 300, function () {
            $('#right').find('.list').show();
            $('#right').find('.close').show();
            $('#right').animate({
                width: "96%",
                opacity: 1
            }, 1000);
        });
        widthVal = true;
    }
});
function sorted(obj){
  var clonedObj = obj.clone();
  obj.remove();
  $('#container').prepend(clonedObj);
  
}
$('.close').click(function (e) {
    e.stopPropagation();
    $(this).parent().animate({
        width: "30%",
        opacity: 1
    }, 1500, function(){
    widthVal = false;
      sorted($(currentObj));
    $('#left').show('fade', 600);
    $('#middle').show('fade',600);
    $('#right').show('fade', 600);
    $('.list').hide();
    $('.close').hide();
    });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
sanjeevk.chauhanpro
0viewers