CSS3 переключить эффект, повторный, не работает, почему?

Question

Я пытаюсь создать различные ссылки, которые переключают различное содержание при нажатии:

<section id="slidebox"> 
    <div id="toggle"> 
     <a class="bot" href="#">Push me</a> 
     <a class="top" href="#slidebox">Push me</a> 
    </div> 
    <div id="box">  
     Lorem ipsum dolor. 
    </div> 
</section> 

<section id="slidebox"> 
    <div id="toggle"> 
     <a class="bot" href="#">Push me 2</a> 
     <a class="top" href="#slidebox">Push me 2</a> 
    </div> 
    <div id="box">  
     OTHER CONTENT 
    </div> 
</section> 

CSS-код для этого:

#toggle { 
    height:30px; 
    position:relative; 
    z-index:2; 
} 
#toggle a { position: absolute; } 

#toggle { 
    height:30px; 
    position:relative; 
    z-index:2; 
} 
#toggle a { position: absolute; } 

#box { 
    overflow:hidden; 
    max-height:0; 
    opacity:0; 
    transition: all .4s ease-out; 
} 

#slidebox:target #box { 
    max-height:100px; 
    opacity:1; 
} 

#slidebox:target .top { opacity:0;pointer-events: none;} 

Я хочу повторить, что по горизонтали, как в колонке для каждого раздела, но с другим текстом/контентом. Проблема в том, что при выполнении этого (используя float:left), когда вы нажимаете другой раздел, он запускает и перемещает содержимое 1-го раздела.

Почему это происходит? Есть ли способ сделать столбцы в строке с независимым и контентом? Это сводит меня с ума!

спасибо.

Answer 1

Ваша проблема заключалась в том, что вы использовали один и тот же идентификатор несколько раз. НЕ ДЕЛАЙТЕ ТО, ЧТО. Это создает проблемы независимо от того, что вы делаете, и является неправильной формой. Используйте классы вместо этого, только используют идентификаторы для получения конкретного объекта

Working example

/* CSS */ 
.toggle { 
    height:30px; 
    position:relative; 
    z-index:2; 
} 
.toggle a { position: absolute; } 
.box { 
    overflow:hidden; 
    max-height:0; 
    opacity:0; 
    transition: all .4s ease-out; 
} 
.slidebox:target .box { 
    max-height:100px; 
    opacity:1; 
} 
.slidebox:target .top { opacity:0; pointer-events: none;} 

/* HTML */ 
<section id="pushOne" class="slidebox"> 
    <div class="toggle"> 
     <a class="bot" href="#">Push me</a> 
     <a class="top" href="#pushOne">Push me</a> 
    </div> 
    <div class="box">  
     Lorem ipsum dolor. 
    </div> 
</section> 

<section id="pushTwo" class="slidebox"> 
    <div class="toggle"> 
     <a class="bot" href="#">Push me 2</a> 
     <a class="top" href="#pushTwo">Push me 2</a> 
    </div> 
    <div class="box">  
     OTHER CONTENT 
    </div> 
</section>