monax_111,
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style type="text/css">
.project {
z-index: 2;
padding: 2px;
margin-bottom: 20px;
padding: 20px;
border-color: SkyBlue;
border-style: ridge;
border-radius: 5px;
border-width: 5px;
}
.hole {
z-index: 2;
display: inline-block;
vertical-align: top;
padding: 2px;
margin-left: 20px;
margin-bottom: 20px;
width: 250px;
border-color: SkyBlue;
border-style: ridge;
border-radius: 5px;
border-width: 5px;
}
.value_progect {
display: none;
width: 550px
}
.name_value_progect {
text-align: left;
width: 400px;
display: inline-block;
height: 22px
}
.value_progect input {
display: none;
width: 100px;
}
</style>
</head>
<body>
<center class="project">
<div class="name_project">Демо Версия 4</div>
<div class="value_progect">
<div class="name_value_progect">Q mcr(mT)</div>
<input class="mysql" name="Q_mcr" value="1">
</div>
<div class="value_progect">
<div class="name_value_progect">Q mcr(mT)</div>
<input class="mysql" name="Q_mcr" value="1">
</div>
<div class="value_progect">
<div class="name_value_progect">Q mcr(mT)</div>
<input class="mysql" name="Q_mcr" value="1">
</div>
<div class="value_progect">
<div class="name_value_progect">Q mcr(mT)</div>
<input class="mysql" name="Q_mcr" value="1">
</div>
<div class="value_progect">
<div class="name_value_progect">Q mcr(mT)</div>
<input class="mysql" name="Q_mcr" value="1">
</div>
<div class="value_progect">
<div class="name_value_progect">Q mcr(mT)</div>
<input class="mysql" name="Q_mcr" value="1">
</div>
<div class="value_progect">
<div class="name_value_progect">Q mcr(mT)</div>
<input class="mysql" name="Q_mcr" value="1">
</div>
<div class="value_progect">
<div class="name_value_progect">Q mcr(mT)</div>
<input class="mysql" name="Q_mcr" value="1">
</div>
</center>
<div class="hole">GREEN-1/23
<div class="trap">БВ3-1</div>
<div class="trap">АВ1-2</div>
<div class="trap">АЧ3-2</div>
</div>
<div class="hole">Ерохинская
<div class="trap">АВ2</div>
<div class="trap">БВ3</div>
<div class="trap">Pz</div>
</div>
<div class="hole">РИФ
<div class="trap">AB-1</div>
<div class="trap">БВ2</div>
<div class="trap">АЧ3-2</div>
<div class="trap">ЮВ1</div>
</div>
<div class="hole">OPENOIL
<div class="trap">AB3-2</div>
<div class="trap">PZ</div>
</div>
<script type="text/javascript">
function edit_project() {
$(".hole:not(.hole:last)").hide("slow");
$(".hole:last").hide("slow",
function() {
$(".value_progect:not(.value_progect:last)").show("slow");
$(".value_progect:last").show(5000,
function() {
$(".value_progect").find(".mysql").show("slow");
})
});
}
$(document).ready(function() {
$('.project').click(
function() {
edit_project()
}
);
})
</script>
</body>
</html>