Как сменить блок при клике на него?

Question

[krainoff99]

Надо что бы при клике на div 1 появлялся вместо него div 2
И тоже самое с div 2 кликаем появляется div 1

Answer 1

[Егор Живагин]

Сделай div 2 поверх div 1 -

<div class="1">
    <div class="2">
    </div>
</div>

CSS (+ класс для активного div 2)

.1{ position: relative;
width: 200px;
height: 200px;
}
.2 {position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
opacity: 0;
}

.2.active{ opacity: 1 }

Теперь тебе по клику на div1/2 нужно просто добавлять и убирать класс active для div 2

Comments

[Егор Живагин]

(Все значения в css -кроме position- просто для примера)

Answer 2

[Евгений]

html:

<div class="changeable">
<div id="block-1" class="block visible">Первый</div>
<div id="block-2" class="block">Второй</div>
</div>

css:

div.block {
display: none;
}
div.block.visible {
display: block;
}

jquery:

$('.block').on('click', function(){
$(this).closest('.changeable').find('.block').toggleClass('visible');
});

Comments

[krainoff99]

school55nn.my1.ru/faq Почему работает через один?

[Евгений]

krainoff99: пока не совсем понимаю, но зачем у вас скрипт в цикле подгружается столько раз, сколько выводятся элементы списка?