Affiche/masque one or more

Affichage/masquage d'un ou plusieurs éléments au clic sur un <button>, le principe des « Tabs content » en fait.

Section #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod, justo vitae dapibus facilisis, libero metus facilisis purus, sit amet imperdiet nulla augue quis dui. Pellentesque ultrices ultrices aliquam. Donec ut dolor dolor. Nullam id posuere dui, quis semper dui. Praesent in turpis vitae tortor malesuada consequat sit amet sit amet quam. Duis congue nibh tellus, quis tincidunt ipsum convallis maximus. Nunc ut erat ut erat commodo pretium non eu ligula. Nullam iaculis sodales ultricies. Aenean quis porttitor augue. Mauris eget commodo dolor. Morbi mattis, leo quis maximus condimentum, lectus quam sagittis velit, suscipit aliquet tellus justo rutrum mi. Donec maximus est quis porta semper.

Section #2

Maecenas est ligula, imperdiet consequat ante eget, lacinia varius velit. Phasellus varius molestie dignissim. Ut vehicula volutpat lorem, quis hendrerit sapien. Cras hendrerit tempus consectetur. Praesent tempus maximus justo, ut lobortis leo sodales quis. In sed diam a lacus bibendum volutpat nec accumsan sapien. Sed a sagittis neque, sed posuere ex. Fusce volutpat aliquet eros. Nullam ut finibus nisl. Proin auctor tempor urna at efficitur.

Section #3

Donec tincidunt non felis elementum commodo. Nunc suscipit vulputate est, quis commodo ipsum pretium eget. In lectus augue, consequat et diam ac, consequat auctor elit. Ut tristique libero tristique turpis fermentum interdum. Sed ultrices tortor lorem. Phasellus eu commodo augue. Etiam dignissim elit vel est malesuada, a feugiat nibh congue. Curabitur ullamcorper ligula eget purus tempus, nec vestibulum arcu venenatis. Curabitur non rhoncus augue, eu porttitor tortor. Maecenas id metus congue, ornare augue vel, porta odio. Etiam varius facilisis facilisis

Code HTML

Les data-links contiennent les id des éléments à afficher. 

<ul>
  <li><button data-links="section-1">Section #1</button>
  <li><button data-links="section-2, section-3">Section #2-3</button>
  <li><button data-links="section-3">Section #3</button>
  <li><button data-links="section-1,section-2,section-3">Affiche all</button>
  <li><button data-links="">Masque all</button>
</ul>
<section id="section-1" class="projet">
  <h2>Section #1</h2>
  <p>Lorem...</p>
</section>
<section id="section-2" class="projet">
  <h2>Section #2</h2>
  <p>Maecenas...</p>
</section>
<section id="section-3" class="projet">
  <h2>Section #3</h2>
  <p>Donec...</p>
</section>

Code JavaScript

Script à mettre en fin de page.