<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() {
});
}
};
