純粋なCSSアコーディオン - コンテンツの公開問題

Question

私は簡単なアコーディオンをHTMLとCSSだけで作成しましたが、うまくいけばあなたが私を助けることができる1つの問題があります。アコーディオンは正常に動作していますが、display：noneを使用してコンテンツを非表示にしてから表示：ブロックして表示します。リンクが押されたときにコンテンツが表示されるように滑らかな移行を0.5秒間行うようにしたいと思います。ユーザが別のリンクを押すと、アクティブなコンテンツをスライドさせて、アクティブなコンテンツをスライドさせたいと思います。

おかげ

HTMLコード：

<section id="accordion"> 
    <section id="accordion-title-1"> 
     <a href="#accordion-title-1"> 
      <h2>Videos</h2> 
     </a> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis repellat obcaecati fugiat voluptatibus doloremque provident nihil, facilis harum quos excepturi officia assumenda odit, dolorem voluptates quidem molestiae velit, nostrum eligendi.</p> 
    </section> 
    <section id="accordion-title-2"> 
     <a href="#accordion-title-2"> 
      <h2>Videos</h2> 
     </a> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis repellat obcaecati fugiat voluptatibus doloremque provident nihil, facilis harum quos excepturi officia assumenda odit, dolorem voluptates quidem molestiae velit, nostrum eligendi.</p> 
    </section> 
    <section id="accordion-title-3"> 
     <a href="#accordion-title-3"> 
      <h2>Videos</h2> 
     </a> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis repellat obcaecati fugiat voluptatibus doloremque provident nihil, facilis harum quos excepturi officia assumenda odit, dolorem voluptates quidem molestiae velit, nostrum eligendi.</p> 
    </section> 
</section> 

CSSコード：

* { 
    padding:0px; 
    margin:0px; 
    box-sizing: border-box; 
} 

body { 
    font-family: sans-serif; 
    font-size: 14px; 
} 

#accordion { 
    margin-top:100px; 
    padding:20px; 
    background:#2e6572; 
} 

#c-accordion section { 
line-height: 1.6em; 
} 


#accordion section a { 
    color:#fff; 
    text-decoration: none; 
    font-size: 20px; 
    letter-spacing: 2px; 
    display: inline-block; 
    padding-bottom:15px; 
    border-bottom: 1px solid red; 
} 

#accordion #accordion-title-2 a, #accordion #accordion-title-3 a { 
    margin-top:20px; 
} 

#accordion section p { 
    color:#bebebe; 
    margin-top:20px; 
    display: none; 
} 

#accordion section:target p { 
    display: block; 
} 

Answer 1

ただ、CSSへの変更を送信

#accordion section p { 
    color:#bebebe; 
    margin-top:20px; 
    max-height:0; 
    overflow: hidden; 
    transition: max-height 0.5s ease-in; 
} 

#accordion section:target p { 
    max-height:100px; 
    overflow:none; 
    transition: max-height 0.5s ease-in; 
} 

デモ：http://jsbin.com/rivayagehe/edit?html,css,output

少し荒く、研磨が必要な場合があります