Thu nhỏ/Tối đa hóa div với jQuery

Question

Tôi về cơ bản muốn giảm thiểu một số div. Thay vì sử dụng "-" và "+", tôi muốn sử dụng một số biểu tượng (từ font-awesome) để giảm thiểu và tối đa hóa div's.

Câu hỏi của tôi liên quan đến vấn đề này; làm thế nào tôi có thể chèn các lớp của các biểu tượng trong đoạn mã này? Tôi đã thử bằng cách thay thế phần .html bằng .attr, nhưng điều đó không thành công.

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

Cảm ơn rất nhiều.

Cập nhật:

Cảm ơn rất nhiều sự giúp đỡ của bạn cho đến thời điểm này. Nhưng phần anh chị em không thực sự phù hợp với tôi bởi vì .widget-content không phải là một trong các nút.

Vì vậy, để tóm tắt; khi tôi muốn giảm thiểu một tiện ích và nhấn nút, tất cả các tiện ích con với mức độ tối thiểu của lớp là .widget-content.

Đây là một đoạn mã HTML của tôi

<!--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> 

Và phần JavaScript:

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

Answer 1

Giả sử bạn cung cấp cho .btn-minimize biểu tượng dấu trừ trong CSS. Bạn cũng cung cấp cho .btn-minimize.btn-plus biểu tượng dấu cộng. sau đó javascript của bạn có thể trông như thế này:

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

Dưới đây là một ví dụ về JSFiddle: http://jsfiddle.net/uzmjq/

Answer 2

Bạn có thể sử dụng CSS để áp dụng những biểu tượng/biểu tượng như hình ảnh nền, sau đó chỉ cần có một lớp CSS riêng biệt chứa các các biểu tượng khác và sau đó chỉ chuyển đổi lớp này trong phần tử.

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