articles pour accordéon

index.html

<main>
 <article>
     <header>
     <h1>Titre art 1</h1>
       <span>&#9660;</span>
     </header>
     <div class="content">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Minime vero, inquit ille, consentit. At certe gravius. Duo Reges: constructio interrete. Negat enim summo bono afferre incrementum diem. Haec et tu ita posuisti, et verba vestra sunt. Qui ita affectus, beatum esse numquam probabis; Cupit enim dícere nihil posse ad beatam vitam deesse sapienti. Cum autem in quo sapienter dicimus, id a primo rectissime dicitur. Laboro autem non sine causa; </p>

<p>Sed quanta sit alias, nunc tantum possitne esse tanta. Tertium autem omnibus aut maximis rebus iis, quae secundum naturam sint, fruentem vivere. Omnes enim iucundum motum, quo sensus hilaretur. Ut in voluptate sit, qui epuletur, in dolore, qui torqueatur. Quamquam id quidem, infinitum est in hac urbe; Cur ipse Pythagoras et Aegyptum lustravit et Persarum magos adiit? </p>


     </div>
    </article>
    
    <article>
        <header>
        <h1>Titre art. 2</h1>
        <span>&#9660;</span>
         
        </header>
        <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Minime vero, inquit ille, consentit. At certe gravius. Duo Reges: constructio interrete. Negat enim summo bono afferre incrementum diem. Haec et tu ita posuisti, et verba vestra sunt. Qui ita affectus, beatum esse numquam probabis; Cupit enim dícere nihil posse ad beatam vitam deesse sapienti. Cum autem in quo sapienter dicimus, id a primo rectissime dicitur. Laboro autem non sine causa; </p>

<p>Sed quanta sit alias, nunc tantum possitne esse tanta. Tertium autem omnibus aut maximis rebus iis, quae secundum naturam sint, fruentem vivere. Omnes enim iucundum motum, quo sensus hilaretur. Ut in voluptate sit, qui epuletur, in dolore, qui torqueatur. Quamquam id quidem, infinitum est in hac urbe; Cur ipse Pythagoras et Aegyptum lustravit et Persarum magos adiit? </p>
        </div>
    </article>
     <article>
        <header>
        <h1>Titre art. 3</h1>
        <span>&#9660;</span>
        </header>
        <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Minime vero, inquit ille, consentit. At certe gravius. Duo Reges: constructio interrete. Negat enim summo bono afferre incrementum diem. Haec et tu ita posuisti, et verba vestra sunt. Qui ita affectus, beatum esse numquam probabis; Cupit enim dícere nihil posse ad beatam vitam deesse sapienti. Cum autem in quo sapienter dicimus, id a primo rectissime dicitur. Laboro autem non sine causa; </p>

<p>Sed quanta sit alias, nunc tantum possitne esse tanta. Tertium autem omnibus aut maximis rebus iis, quae secundum naturam sint, fruentem vivere. Omnes enim iucundum motum, quo sensus hilaretur. Ut in voluptate sit, qui epuletur, in dolore, qui torqueatur. Quamquam id quidem, infinitum est in hac urbe; Cur ipse Pythagoras et Aegyptum lustravit et Persarum magos adiit? </p>
        </div>
    </article>
    
     <article>
        <header>
        <h1>Titre art. 4</h1>
        <span>&#9660;</span>
        </header>
        <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Minime vero, inquit ille, consentit. At certe gravius. Duo Reges: constructio interrete. Negat enim summo bono afferre incrementum diem. Haec et tu ita posuisti, et verba vestra sunt. Qui ita affectus, beatum esse numquam probabis; Cupit enim dícere nihil posse ad beatam vitam deesse sapienti. Cum autem in quo sapienter dicimus, id a primo rectissime dicitur. Laboro autem non sine causa; </p>

<p>Sed quanta sit alias, nunc tantum possitne esse tanta. Tertium autem omnibus aut maximis rebus iis, quae secundum naturam sint, fruentem vivere. Omnes enim iucundum motum, quo sensus hilaretur. Ut in voluptate sit, qui epuletur, in dolore, qui torqueatur. Quamquam id quidem, infinitum est in hac urbe; Cur ipse Pythagoras et Aegyptum lustravit et Persarum magos adiit? </p>
            
        </div>
    </article>
        <article>
        <header>
        <h1>Titre art. 4</h1>
        <span>&#9660;</span>
        </header>
        <div class="content">
        <p>Lorem ia quid est boni praeter summam voluptatem, et eam sempiternam? </p>

<p>Quod equidem non reprehendo; Dic in quovis conventu te omnia facere, ne doleas. Qui convenit? Sed tamen intellego quid velit. Ita multo sangum timore nemo potest. </p>
            
            <p>Scio enim esse quosdam, qui quan reprehendo; Dic in quovis conventu te omnia vis lingua philosophari possint; Si enim ad populum me vocas, eum. Immo videri fortasse. Praeteritis,ummam voluptatem, et eam sempiternam? </p>
             <p>Lorem ipsum  sit amet, consectetur  elit. Bonum negas esse divitias, praeposìtum esse dicis? Apud imperitos tum illa dicta sun </p>

        </div>
    </article>
</main>

main.css

@import url(http://fonts.googleapis.com/css?family=News+Cycle:700);
body{margin:0;padding:0;background:#777;color:#ccc;font-family: 'News Cycle', sans-serif;}

main{
  width:92%;
  margin:0 auto;
}

article{
    margin:8px 0;
    background:#999;
    color:#222;
    padding:2px;
}

article header{
    position:relative;
    cursor:pointer;
    
}
article header h1{
    display:block;
    margin:0;
    padding:3px 0;
}
article header span{
    display:block;
    width:20%;
    text-align:right;
     position:absolute;
    right:10px;
    top:0;
    cursor:pointer;
}

.content{
    display:none;
}