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

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