Minimiere/maximiere Divs mit jQuery

Question

Ich möchte im Grunde einige divs minimieren. Anstatt "-" und "+" zu verwenden, möchte ich einige Symbole (von font-awesome) verwenden, um die divs zu minimieren und zu maximieren.

Meine Frage dazu; Wie kann ich die Klassen der Symbole in diesen Code einfügen? Ich habe versucht, den .html Teil durch .attr zu ersetzen, aber das hat nicht funktioniert.

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

Vielen Dank.

Update:

Vielen Dank für Ihre Hilfe bisher. Aber der Geschwister Teil passt mir nicht wirklich, weil .widget-content nicht einer der Schaltfläche ist.

Also zusammenzufassen; Wenn ich ein Widget minimieren und auf die Schaltfläche drücken möchte, minimieren alle Widgets mit der Klasse .widget-content.

Dies ist ein Stück meiner HTML

<!--widget-1-2--> 
    <section class="widget span3"> 
     <!--front--> 
     <div id="front" class="widget-1-2 flip"> 
     <div class="widget-header"> 
      <h2>Monthly Statistics</h2> 
      <div class="btn-group pull-right"> 
       <button id="btn-front" class="btn"><i class="icon-cogs icon-white" alt="settings"></i></button> 
       <button class="btn btn-minimize"><i class="icon-chevron-up icon-white" alt="minimize"></i></button> 
       <button class="btn btn-close"><i class="icon-remove icon-white" alt="close"></i></button> 
      </div> 
     </div> 
     <div class="widget-content"><p>Dit is de voorkant.</p></div> 
    </div><!--/front--> 
</section> 

Und der JavaScript Teil:

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

Answer 1

Sagen Sie bitte .btn-minimize in CSS das Minus-Symbol geben. Sie geben auch .btn-minimize.btn-plus das Plus-Symbol. Ihr Javascript kann dann wie folgt aussehen:

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

Hier ist ein Beispiel auf JSFiddle: http://jsfiddle.net/uzmjq/

Answer 2

Sie CSS verwenden können, um die Symbole/Symbole als Hintergrundbilder anwenden, dann nur noch eine separate CSS-Klasse, die das enthält andere Symbole die und dann nur diese Klasse im Element umschalten.

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(); 
});