最小化/最大化div'；使用jQuery

我基本上想减少一些div。我不想使用“-”和“+”，而是想使用一些符号（来自字体awesome）来最小化和最大化div

关于这一点，我的问题；如何在这段代码中插入图标类？我尝试用.attr替换.html部分，但没有成功

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

和JavaScript部分：

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

$（“.icon-chevron-up”）。单击（函数（）{
$（this.toggleClass（“图标V形向下”）；
$（“.widget content”）.slideToggle（）；
});

假设你给

.btn最小化CSS中的减号图标。您还为
.btn minimize.btn plus
提供了加号图标。然后，您的javascript可以如下所示：

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

下面是一个关于JSFIDLE的示例：
您可以使用CSS将符号/图标应用为背景图像，然后创建一个单独的CSS类，其中包含其他图标，然后在元素中切换该类

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

谢谢各位。结果很好！我用过你的代码，这对我很有帮助。但现在我一直在努力解决以下问题。我一直在创建一个页面，展示不同的小部件（如图表）。对于这些小部件，我或多或少使用了相同的div和类作为基础。我在不同的div中多次使用class.widget内容。所以当我最小化一个特定的div时，所有的div都是我使用class.widget内容最小化的地方。如何解决这个问题？假设您将按钮和
小部件内容
-div放在同一个包装div中。在该div中，没有其他内容。然后，您可以修改我提供的javascript的第三行，如下所示：
$（this）.sides（'.widget content'）.slideToggle（）非常感谢您迄今为止的帮助，但这一款并不适合我。我更新了我的答案以提供更多信息。假设每个
部分
标记只有一个按钮和一个小部件内容，请执行
$（this）.最近（'section'）.find（'.widget content'）.slideToggle（）。
$(".btn-minimize").click(function() {
  $(this).toggleClass("maximize");
  $(".widget-content").slideToggle();
});