JS Accordéon

HTML

<h1>Accordéon 1</h1>
<div id="accordeon1">
  <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>
</div>

<h1>Accordéon 2</h1>
<div id="accordeon2">
  <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...

CSS

header {
  background: black;
  color: white;
}

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

article.visible {
  display: block;
}

JavaScript

/* TODO:
 *
 * Remplacer l'implémentation du composant ci-dessous par une classe Accordeon,
 * de manière à ce qu'on puisse l'intégrer et l'utiliser de la manière suivante:
 *
 * var accordeon1 = new Accordeon(document.getElementById('accordeon1'));
 * var accordeon2 = new Accordeon(document.getElementById('accordeon2'));
 * accordeon1.afficherSection(1); // => affiche le contenu de "Donald Trump accuse les juges...",
 *                                // ... dans le 1er accordéon seulement.
 *
 */
 
// ================
// CODE SOURCE DU COMPOSANT:
 
class Accordeon {
  constructor(element) {
    // implémenter l'initialisation du composant dans element
    // (cacher les articles, etc...)
  }
  // définir la méthode afficherSection()
}

// ================
// CODE DE L'INTEGRATEUR:

var accordeon1 = new Accordeon(document.getElementById('accordeon1'));
var accordeon2 = new Accordeon(document.getElementById('accordeon2'));
accordeon1.afficherSection(1); // => affiche le contenu de "Donald Trump accuse les juges...",
                               // ... dans le 1er accordéon seulement.

// ================
// CODE À RÉ-IMPLÉMENTER DANS LA CLASSE, PUIS À SUPPRIMER

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