Afficher un bloc / Masquer tous les blocs (sans jQuery)

Pourquoi ?

Je ne sais pas vous mais depuis l’apparition des frameworks javascript, genre jQuery & co., les opérations les plus simples en JS me sont complètement sorties de la tête. Du genre :

mais comment qu’on faisait avant ?!

Alors si vous avez du markup comme ça :

<h3><a href="javascript:switchfaq('faq14');">Question FAQ</a></h3>
<p class="level3" id="faq14">Réponse</p>

<h3><a href="javascript:switchfaq('faq15');">Question FAQ</a></h3>
<p class="level3" id="faq15">Réponse </p>

<h3><a href="javascript:switchfaq('faq16');">Question FAQ</a></h3>
<p class="level3" id="faq16">Réponse </p>

…avec un minimum strict de CSS :

<style type="text/css">p{ display:none; } h3 a {color:#01537A;}  h3 a:hover {text-decoration:none;}</style>

…voilà comment on faisait des accordéons avant jQuery :

<script type="text/javascript">
function switchfaq(div) {
	var divs = document.getElementsByTagName('p');
	for (var i = 0, ele; ele = divs[i]; i++) {
		if (ele.className == "level3") {
			ele.style.display = 'none';
		}
	}
	document.getElementById(div).style.display = 'block';

}
</script>