Cacher un div en JS

Ce qu’il y de pratique avec Jquery et donc le Javascript c’est que l’ont peut cacher certaine partie de la page pour gagner de la place ou pour par exemple ne pas spoiler le lecteur et tout cela sans plugin.

Pour cela on a un lien et un div:

<a href="#" id="lien_div">Cliqué que le lien pour afficher le div</a>

<div id="div_cacher" style="display:none;padding:4px;width:400px;background-color: #8fccff;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-moz-box-shadow: 0px 0px 10px #000000;-webkit-box-shadow: 0px 0px 10px #000000;box-shadow: 0px 0px 10px #000000;">
<p>Mensarum enim voragines et varias voluptatum inlecebras, ne longius progrediar, praetermitto illuc transiturus quod quidam per ampla spatia urbis subversasque silices sine periculi metu properantes equos velut publicos signatis quod dicitur calceis agitant, familiarium agmina tamquam praedatorios globos post terga trahentes ne Sannione quidem, ut ait comicus, domi relicto. quos imitatae matronae complures opertis capitibus et basternis per latera civitatis cuncta discurrunt.</p>

<p>Haec igitur Epicuri non probo, inquam. De cetero vellem equidem aut ipse doctrinis fuisset instructior est enim, quod tibi ita videri necesse est, non satis politus iis artibus, quas qui tenent, eruditi appellantur aut ne deterruisset alios a studiis. quamquam te quidem video minime esse deterritum.</p>

<p>Cognitis enim pilatorum caesorumque funeribus nemo deinde ad has stationes appulit navem, sed ut Scironis praerupta letalia declinantes litoribus Cypriis contigui navigabant, quae Isauriae scopulis sunt controversa.</p>

<p>Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.</p>
</div>

Par défaut le div est caché, pour cela on met comme CSS: display:none; dans le div. Ensuite suivant si le div est visible ou non on le cachera ou l’affichera avec une condition. Pour plus de clarté, on va aussi modifier le texte dans le lien.
Le code JS:

$(document).on('click', '#lien_div', function() {
	if ( $("#div_cacher").is(":visible") ) // Si le div est affiché: 
		{
$('#div_cacher').fadeOut(1000); // On cache le div.
$('#lien_div').html('Cliqué que le lien pour afficher le div'); // On remet le lien par déffaut.
		}
	else // Si le div n'est pas affiché:
		{ 
$('#div_cacher').fadeIn(1000); // On affiche le div.
$('#lien_div').html('Retour'); // On change le texte du lien pour indiquer que si on reclique dessus on le cache.
		}
	return false;
});

Ce code marche qu’avec un div ce qui peut être assez embêtant si on veut en avoir plusieurs sur la même page, mais avec quelques modifications, il sera possible de l’utiliser dynamiquement.
Pour cela on va utliser l’attribut data. Chaque div aura une partie de sont id commun et une partie unique.

Voici dont le code HTML modifié:

<a href="#" class="lien_div" data-div_cacher="1">Cliqué que le lien pour afficher le div 1</a><br>
<a href="#" class="lien_div" data-div_cacher="2">Cliqué que le lien pour afficher le div 2</a><br>
<a href="#" class="lien_div" data-div_cacher="test">Cliqué que le lien pour afficher le div test</a><br>

<div id="div_cacher_1" style="display:none;padding:4px;width:400px;background-color: #8fccff;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-moz-box-shadow: 0px 0px 10px #000000;-webkit-box-shadow: 0px 0px 10px #000000;box-shadow: 0px 0px 10px #000000;">
<p>div_cacher_1</p>
<p>Mensarum enim voragines et varias voluptatum inlecebras, ne longius progrediar, praetermitto illuc transiturus quod quidam per ampla spatia urbis subversasque silices sine periculi metu properantes equos velut publicos signatis quod dicitur calceis agitant, familiarium agmina tamquam praedatorios globos post terga trahentes ne Sannione quidem, ut ait comicus, domi relicto. quos imitatae matronae complures opertis capitibus et basternis per latera civitatis cuncta discurrunt.</p>
</div>

<div id="div_cacher_2" style="display:none;padding:4px;width:400px;background-color: #8fccff;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-moz-box-shadow: 0px 0px 10px #000000;-webkit-box-shadow: 0px 0px 10px #000000;box-shadow: 0px 0px 10px #000000;">
<p>div_cacher_2</p>
<p>Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.</p>
</div>

<div id="div_cacher_test" style="display:none;padding:4px;width:400px;background-color: #8fccff;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-moz-box-shadow: 0px 0px 10px #000000;-webkit-box-shadow: 0px 0px 10px #000000;box-shadow: 0px 0px 10px #000000;">
<p>div_cacher_test</p>
<p>Cognitis enim pilatorum caesorumque funeribus nemo deinde ad has stationes appulit navem, sed ut Scironis praerupta letalia declinantes litoribus Cypriis contigui navigabant, quae Isauriae scopulis sunt controversa.</p>
</div>

Le code JS:

$(document).on("click", ".lien_div", function() {
var $lien_data = $(this).data("div_cacher"); // On récupère la partie du div unique pour pouvoir selectionner le bon div.
// alert($lien_data);
	if ( $("#div_cacher_"+$lien_data).is(":visible") ) // Si le div est affiché: 
		{
$("#div_cacher_"+$lien_data).fadeOut(1000); // On cache le div.
$(this).html("Cliqué que le lien pour afficher le div "+$lien_data); // On remet le lien par déffaut.
		}
	else // Si le div n'est pas affiché:
		{ 
$("#div_cacher_"+$lien_data).fadeIn(1000); // On affiche le div.
$(this).html("Retour div "+$lien_data); // On change le texte du lien pour indiquer que si on reclique dessus on le cache.
		}
	return false;
});

Il y a une démo:

Le premier exemple de cet article permet donc de cacher/afficher qu’un seul div sur la même page ce qui peut être embêtant, le second exemple permet lui d’utiliser plusieurs div ce qui est assez pratique.
L’inconvénient ? Tout les div restent affiché, on peut vouloir n’en garder qu’un seul d’affiché. Voila donc un nouveau code html pour l’exemple:

<a href="#" class="lien_div" data-div_cacher="1">div_1</a> - 
<a href="#" class="lien_div" data-div_cacher="2">div_2</a> - 
<a href="#" class="lien_div" data-div_cacher="3">div_3</a> - 
<a href="#" class="lien_div" data-div_cacher="4">div_4</a>
<hr>
<div id="div_cacher_1" class="action">div_1</div>
<div id="div_cacher_2" class="div_cacher">div_2</div>
<div id="div_cacher_3" class="div_cacher">div_3</div>
<div id="div_cacher_4" class="div_cacher">div_4</div>

Le nouveau code js:

$(document).on('click', '.lien_div', function() {
	$('.action').removeClass('action').addClass('div_cacher'); // On recherche le div qui à la class action, car c'est celui qui est affiché et on lui enlève

	var data_div = $(this).data('div_cacher'); // On récup l'id de notre div qu'on veut afficher dans l'atribut data
	$('#div_cacher_'+data_div).addClass('action').removeClass('div_cacher'); // On l'affiche et on ajoute une class css pour faire jolie
});

Le CSS:

.div_cacher {
display:none;
}

.action {
padding:4px;
background-color: #8fccff;

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 4px 4px 5px #000000;
-webkit-box-shadow: 4px 4px 5px #000000;
box-shadow: 4px 4px 5px #000000;
filter: progid:DXImageTransform.Microsoft.Shadow(strength = 4, direction = 135, color = '#000000');
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(strength = 4, Direction = 135, Color = '#000000')";
}