"User Short Infos LIst"
Bootstrap 3.1.0 Snippet by MarkusN99

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="liste"> <div class="user"> <div class="panel panel-default menu 1"> <div class="panel-body"> Infos Markus </div> </div> <div onclick="ausfahren('1')" id="1" class="panel panel-default sub_menu"> <div class="panel-body"> <span class="glyphicon glyphicon-user"> </span>Markus </div> </div> </div> <div class="user"> <div class="panel panel-default menu 2"> <div class="panel-body"> Infos Christian </div> </div> <div onclick="ausfahren('2')" id="2" class="panel panel-default sub_menu"> <div class="panel-body"> <span class="glyphicon glyphicon-user"> </span>Christian </div> </div> </div> <div class="user"> <div class="panel panel-default menu 3"> <div class="panel-body"> Infos Peter </div> </div> <div onclick="ausfahren('3')" id="3" class="panel panel-default sub_menu"> <div class="panel-body"> <span class="glyphicon glyphicon-user"> </span>Peter </div> </div> </div> </div>
.liste { position: absolute; top: 0; left: 0; height:100%; background-color:grey; } .user { margin: 5px; position: relative; width:100%; } .menu { z-index:2; width:100px; height:60px; } .sub_menu { position: absolute; top:0px; left:0px; z-index:1; width:100px; height:60px; cursor:pointer; }
function ausfahren (id) { var object=document.getElementById(id); var objectclass=document.getElementsByClassName(id); if ($( object ).hasClass( "active" ) == true) { $( object ).animate({ position: "absolute", left: "0px", top: "0px", height: "60px", width: "100px" }, 500, function() { $( object ).removeClass( "active" ); }); $( objectclass ).animate({ position: "absolute", left: "0px", top: "0px", height: "60px", width: "100px" }, 500, function() { }); } else { $( object ).animate({ position: "absolute", left: "200px", top: "0px", height: "60px", width: "100px" }, 500, function() { $( object ).addClass( "active" ); }); $( objectclass ).animate({ position: "absolute", left: "0px", top: "0px", height: "60px", width: "200px" }, 500, function() { }); } };

Related: See More


Questions / Comments: