вопрос
Добрый день. Прошу помощи в написании не сложного скрипта или если это возможно помочь, это сделать на css.
Вопрос: есть 6 равных блока, расположенных в 2 ряда.
Необходимо, чтобы при нажатии на первый блок, ниже появлялась информация которая к нему относится, при этом занимая всю ширину и смещая блоки которые находятся ниже в низ.
При нажатии на следующий блок например номер 2, первый скрывался и появлялась информация, которая относится ко второму блоку, также на всю ширину.
При повторном нажатии на тот же блок - информация скрывалась.
Вопрос: есть 6 равных блока, расположенных в 2 ряда.
Необходимо, чтобы при нажатии на первый блок, ниже появлялась информация которая к нему относится, при этом занимая всю ширину и смещая блоки которые находятся ниже в низ.
При нажатии на следующий блок например номер 2, первый скрывался и появлялась информация, которая относится ко второму блоку, также на всю ширину.
При повторном нажатии на тот же блок - информация скрывалась.
http://jsfiddle.net/D0Gmatist/U69Kj/
function contentVipId(id) {
$(".content-vip").removeClass("open1");
$(".content-vip").removeClass("open2");
$(".content-vip").removeClass("open3");
$(".content-vip").removeClass("open4");
$(".content-vip").removeClass("open5");
$(".content-vip").removeClass("open6");
$(".content-vip").addClass("open" + id);
};html,body,div{
margin: 0;
padding: 0;
}
.content-vip{
background: #DFF5FF;
display: block;
font-size: 0;
padding: 10px 0 0 10px;
position: relative;
width: 630px;
}
.content-vip .block{
background: rgba(255, 255, 255, 0.5);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.75);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.75);
box-shadow: 0 0 5px rgba(0,0,0,0.75);
display: inline-block;
font-size: 12px;
margin: 0 10px 10px 0;
height: 60px;
width: 200px;
}
.open1 .block1{}
.open2 .block2{}
.open3 .block3{}
.open4 .block4{}
.open5 .block5{}
.open6 .block6{}
.content-vip .info{
background: rgba(255, 255, 255, 0.9);
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.75);
box-shadow: inset 0 0 5px rgba(0,0,0,0.75);
display: none;
font-size: 12px;
margin: 0 10px 10px 0;
overflow: hidden;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-ms-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;
opacity: 0;
padding: 5px 8px;
visibility: hidden;
height: 0;
width: 604px;
}
.open1 .info1{
display: block;
opacity: 1;
visibility: visible;
height: auto;
}
.open2 .info2{
display: block;
opacity: 1;
visibility: visible;
height: auto;
}
.open3 .info3{
display: block;
opacity: 1;
visibility: visible;
height: auto;
}
.open4 .info4{
display: block;
opacity: 1;
visibility: visible;
height: auto;
}
.open5 .info5{
display: block;
opacity: 1;
visibility: visible;
height: auto;
}
.open6 .info6{
display: block;
opacity: 1;
visibility: visible;
height: auto;
}
<div class="content-vip">
<div class="block block1" onclick="contentVipId('1')">block</div>
<div class="block block2" onclick="contentVipId('2')">block</div>
<div class="block block3" onclick="contentVipId('3')">block</div>
<div class="info info1">info1</div>
<div class="info info2">info2</div>
<div class="info info3">info3</div>
<div class="info info4">info4</div>
<div class="info info5">info5</div>
<div class="info info6">info6</div>
<div class="block block4" onclick="contentVipId('4')">block</div>
<div class="block block5" onclick="contentVipId('5')">block</div>
<div class="block block6" onclick="contentVipId('6')">block</div>
</div>
