JS Accordéon

HTML

<section>
  <header>Le programme de Donald Trump</header>
  <article>La durée de vie d'un décret est par ailleurs limitée: un président donc abroger un décret d'un prédécesseur, comme l'a fait Donald Trump en annulant plusieurs textes signés par Barack Obama, sur les projets d'oléoducs Keystone ou sur le financement ...</article>
</section>
<section>
  <header>Donald Trump accuse les juges...</header>
  <article>Dire que Donald Trump a peu apprécié le blocage de son décret anti-immigration par un juge fédéral est un euphémisme. Samedi 4 février, il l'a désigné à la vindicte des 23 millions d'abonnés de son compte Twitter, le qualifiant de « soi-disant juge ...</article>
</section>
<section>
  <header>Donald Trump rencontrera ses alliés de l'Otan</header>
  <article>En mai aura lieu une rencontre entre Donald Trump et ses alliés de l'Otan, a annoncé dimanche la Maison Blanche, après un entretien téléphonique entre le président américain et le secrétaire général de l'Alliance atlantique Jens Stoltenberg. Donald ...</article>
</section>

CSS

header {
  background: black;
  color: white;
}

article {
  display: none;
  background: white;
  color: black;
}

article.visible {
  display: block;
}

JavaScript

var headers = document.getElementsByTagName('header');
var articles = document.getElementsByTagName('article');

// cette fonction affiche le i-ème article
function afficherArticle(i) {
  articles[i].classList.add('visible');
}

// cette fonction cache tous les articles
function cacherArticles() {
  for (var i = 0; i < articles.length; i++) {
    articles[i].classList.remove('visible');
  }
}

// cette fonction retourne une fonction qui sert à n'afficher que l'i-ème article
function pourAfficherArticle(i) {
  return function(){
  	cacherArticles();
    afficherArticle(i);
  };
}

// initialisation des headers
for (var i = 0; i < headers.length; i++) {
  headers[i].onclick = pourAfficherArticle(i);
}

// concepts:
// - getElementsByTagName()
// - scope (fonctions dans boucles for)
// - fonctions qui retournent des fonctions