Minimize / Maximize div's with jQuery

Question

I basically want to minimise some div\'s . Instead of using \"-\" and \"+\", I want to use some symbols (from font-awesome) to minimise and maximise the div\'s.

My

Answer 1

Say you give .btn-minimize the minus icon in CSS. You also give .btn-minimize.btn-plus the plus icon. Your javascript can then look like this:

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

Here's an example on JSFiddle: http://jsfiddle.net/uzmjq/

Answer 2

You can use CSS to apply the symbols/icons as background images, then just have a separate CSS class which contains the other icons which and then just toggle this class in the element.

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