Attention, c'est dépendant de jQuery, évidemment !
Parfait pour activer des classes au click, uniquement piloté par des attributs HTML :
$('*[data-toggle]').click(function () { if ($(this).data("toggledest")) $($(this).data("toggledest")).toggleClass($(this).attr("data-toggle")); else $(this).toggleClass($(this).attr("data-toggle")); });
<div data-toggle="actif"> Clique moi ! </div>
Le div activera ou désactivera sa classe “actif” à chaque click.
<div id="click" data-toggle="actif" data-toggledest="#coucou"> Clique moi ! </div> <div id="coucou"> Coucou toi. </div>
Le div activera ou désactivera la classe “actif” de l'élément #coucou à chaque click sur le div #click . A noter qu'il faut préciser dans data-toggledest
le # ou le . selon si l'élement ciblé est un id ou une classe.
On peut également cibler plusieurs élements, en les séparant par des virgules, et (dés)activer plusieurs classes, en les séparant par des espaces :
<div id="click" data-toggle="actif selectionne" data-toggledest="#coucou,#aussi"> Clique moi ! </div> <div id="coucou"> Coucou toi. </div> <div class="aussi"> Toi aussi. </div>