Reine CSS Akkordeon - Reveal Inhalt Ausgabe

Question

Ich habe ein einfaches Akkordeon mit nur HTML und CSS erstellt, aber es gibt ein Problem, hoffentlich können Sie mir helfen. Das Akkordeon funktioniert ordnungsgemäß, verwendet aber display: none, um den Inhalt auszublenden und dann anzuzeigen: block, um es anzuzeigen. Ich hätte gerne einen fließenden Übergang, der für .5s nach unten rutscht, damit der Inhalt beim Drücken der Verknüpfung angezeigt wird, und wenn der Benutzer einen anderen Link drückt, möchte ich den aktiven Inhalt verschieben und den aktiven Inhalt verschieben.

Dank

HTML-Code:

<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-Code:

* { 
    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

nur die Änderungen an der CSS-Posting

#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; 
} 

Demo: http://jsbin.com/rivayagehe/edit?html,css,output

Es ist ein bisschen rau und benötigt möglicherweise etwas Polieren