Не нравятся результаты поиска? Попробуйте другой поиск!

Скрипт выдвижного блока


     03.03.2014    Общие вопросы по вёрстке, jQuery    1585

вопрос
Добрый день. Прошу помощи в написании не сложного скрипта или если это возможно помочь, это сделать на css.
Вопрос: есть 6 равных блока, расположенных в 2 ряда.

Скрипт выдвижного блока


Необходимо, чтобы при нажатии на первый блок, ниже появлялась информация которая к нему относится, при этом занимая всю ширину и смещая блоки которые находятся ниже в низ.

Скрипт выдвижного блока


При нажатии на следующий блок например номер 2, первый скрывался и появлялась информация, которая относится ко второму блоку, также на всю ширину.

Скрипт выдвижного блока


При повторном нажатии на тот же блок - информация скрывалась.

Ответил: D0Gmatist


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>

Комментарии пользователей (2)

Sander
1126

1637 | 1204

Sander - 3 марта 2014 17:12 - Эксперт


Можно так.

SanDev.pro - мой блог.

ICQ: 404-037-556
Skype: Sander8804

D0Gmatist
225

794 | 281

D0Gmatist - 4 марта 2014 11:53 - Местный


Каждый программист знает - в правильном софте все должно быть прекрасно:
и пользовательский интерфейс, и программные решения, и гениальные ошибки!
Болтовня ничего не стоит. Покажите мне код.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы