Minimize / Maximize div’s avec jQuery

Je veux fondamentalement minimiser certaines div. Au lieu d’utiliser “-” et “+”, je veux utiliser quelques symboles (de font-awesome) pour minimiser et maximiser les div.

Ma question à ce sujet; Comment puis-je insérer les classes des icons dans ce morceau de code? J’ai essayé en remplaçant la partie .html par .attr, mais cela n’a pas fonctionné.

 $(".btn-minimize").click(function(){ if($(this).html() == "-"){ $(this).html("+"); } else{ $(this).html("-"); } $(".widget-content").slideToggle(); });

Merci beaucoup.

Mettre à jour:

Merci beaucoup pour votre aide jusqu’à présent. Mais la partie soeur ne me convient pas vraiment, car .widget-content n’en fait pas partie.

Donc, pour résumer; lorsque je veux minimiser un widget et appuyer sur le bouton, tous les widgets avec la classe .widget-content minimisés.

Ceci est un morceau de mon HTML

      Monthly Statistics
     
 
 Dit is de voorkant.

Et la partie JavaScript:

  $(".icon-chevron-up").click(function(){ $(this).toggleClass("icon-chevron-down"); $(".widget-content").slideToggle(); });

Dites que vous donnez .btn-minimize l’icône moins en CSS. Vous donnez également .btn-minimize.btn-plus l’icône plus. Votre javascript peut alors ressembler à ceci:

 $(".btn-minimize").click(function(){ $(this).toggleClass('btn-plus'); $(".widget-content").slideToggle(); });

Voici un exemple sur JSFiddle: http://jsfiddle.net/uzmjq/

Vous pouvez utiliser CSS pour appliquer les symboles / icons en tant qu’images d’arrière-plan, puis créez simplement une classe CSS séparée contenant les autres icons, puis basculez simplement cette classe dans l’élément.

CSS

 .btn-minimize { background-image: url("/path/to/icon"); } .maximize { background-image: url("/path/to/another/icon"); }

jQuery

 $(".btn-minimize").click(function() { $(this).toggleClass("maximize"); $(".widget-content").slideToggle(); });