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 question concerning this; how can I insert the classes of the icons in this piece of code? I tried by replacing the .html part with .attr, but that didn't worked out.

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

Thanks a lot.

Update:

Thanks a lot for your help so far. But the sibling part doesn't really fit me because .widget-content isn't one of the button.

So to summarise; when I want to minimise one widget and press to button, all the widgets with the class .widget-content minimise.

This is a piece of my 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>

And the JavaScript part:

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

score 12 · Accepted Answer · answered Apr 23 '13 at 08:41

12

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/

answered Apr 23 '13 at 08:41

Andreas Eriksson

8,979
8
47
65

Thanks guys. Worked out just fine! – Apr 23 '13 at 09:22
1

I've used your pieces of code and it's helping me out a lot. But now i've been struggling with the following problem. I've been creating a page where I showcase different widgets (charts e.g.). For those widgets I've used more or less the same div's and classes as a base. I've used the class .widget-content multiple times in the different div's. So when I minimize one specific div, all the div's where I used the class .widget-content minimize. How can I resolve this one? – Apr 26 '13 at 13:13
Say that you put the button and the `widget-content`-div in the same wrapping div. In that div, nothing else resides. You can then modify the third line of my supplied javascript as follows: `$(this).siblings('.widget-content').slideToggle();` – Andreas Eriksson Apr 29 '13 at 11:03
Thanks a lot for your help so far, but this one doesn't reallly fit for me. I've updated my answer to give some more information. – Apr 29 '13 at 13:29
Assuming there's only one button and one widget-content per `section` tag, do `$(this).closest('section').find('.widget-content').slideToggle();`. – Andreas Eriksson Apr 29 '13 at 15:38
Thanks Andreas. Works out fine. – Apr 29 '13 at 15:44
How would you make the div start out in the closed position (minimized)? Right now it starts out opened/maximized. – Kyle Bridenstine Apr 27 '15 at 23:34

score 0 · Answer 2 · answered Apr 23 '13 at 08:43

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

Minimize / Maximize div's with jQuery

2 Answers2

Linked