minimize maximize the div ? javascript or jquery which works for all the div

Question

i want to give minimize and maximize facility to my div..for that i have written following code in my jsp page

<div id="widnow" style="width: auto;">
    <div id="title_bar">
      <button type="button" class="max" id="button">
    <img id="max" src="<%=request.getContextPath()%>/img/Minimize.png" />
</button>
    </div>
      <div id="box" style="height:auto; width: auto;">
       <span id="info3" style="display: none;"></span>

    <div id="chart3" style="width:80%; height:300px;"></div>



    </div>

 </div>

following is my css

#widnow{
    width:400px;
    border: 1px solid #DCDCDC;

}



#button{
    width: 25px;
    height: 24px;
    float:right;
    cursor:pointer;
    position:relative;
    margin: 0px 0px 0px 0px;

}
#title_bar{
    background-image: url("<%=request.getContextPath()%>/img/Header Background.png");
    height: 25px;
    width: auto;
  border-bottom: 1px solid #DCDCDC;

}

following is my js

$("#button").click(function(){

    var isclass = $(this).attr('class');
    if (isclass == "max") 

    {
        $("#max").attr("src","<%=request.getContextPath()%>/img/Minimize.png");
        $(this).removeClass('max');
    }
    else{
        $(this).addClass('max');
        $("#max").attr("src","<%=request.getContextPath()%>/img/Maximize.png");
    }
    $("#box").slideToggle();

});

Its Working Well When there is one div i want to give this facility..but with one single java script function or with j-query how can i achieve this?i have many div in single page and all should have there individual maximize and minimize facility.so can anyone tell me how can change my java script that works with all div?

Answer 1

Reconstructing your code a bit:

function activateMaxMin(elemButton,elemMax,elemBox)
{

  var isclass = elemButton.attr('class');
    if (isclass == "max") 

    {
        elemMax.attr("src","<%=request.getContextPath()%>/img/Minimize.png");
        elemButton.removeClass('max');
    }
    else{
        elemButton.addClass('max');
        elemMax.attr("src","<%=request.getContextPath()%>/img/Maximize.png");
    }
    elemBox.slideToggle();

}

$("#button").click(function(){
activateMaxMin($(this),$("#max"),$("#box"));

});

In case there is another button like this, use:

$("#button1").click(function(){
activateMaxMin($(this),$("#max1"),$("#box1"));

});

Of course, it could have been done in more efficient way, but that would need rewriting your code entirely.

Answer 2

<div id="widnow" class='window' style="width: auto;">
    <div id="title_bar" class='title_bar'>
      <button type="button" class="maxMinButton" id="button">
    <img id="max" src="<%=request.getContextPath()%>/img/Minimize.png"  class='max'/>
</button>
    </div>
      <div id="box" style="height:auto; width: auto;" class='box'>
       <span id="info3" style="display: none;"></span>

    <div id="chart3" style="width:80%; height:300px;"></div>



    </div>

 </div>

//javascript function

function activateMaxMin(elemButton,elemMax,elemBox) {

var isclass = elemButton.attr('class'); if (isclass == "max")

{
    elemMax.attr("src","<%=request.getContextPath()%>/img/Minimize.png");
    elemButton.removeClass('max');
}
else{
    elemButton.addClass('max');
    elemMax.attr("src","<%=request.getContextPath()%>/img/Maximize.png");
}
elemBox.slideToggle();

}

$(document).ready(function(){
$(".maxMinButton").click(function(){

var elemButton=$(this);
var maxMinWidnow=button.closes('.window');
var elemMax=$(".max:firs",maxMinWidnow);
var elemBox=$(".box:first",maxMinWidnow);

activateMaxMin(elemButton,elemMax,elemBox)
});
});

This is the best I could get without doing lots of modifications to your code. Notice the added classes in each div in html, that are necessary. Be careful during modification.

Answer 3

Just change id notation "#" to class selector "." like #max to .max

What browser does it would work only for first occurrence of the id and try to change the img id to class

Well in your case that is different i have created a fiddle see at that if that helps you:

http://jsfiddle.net/32e2V/

$(".button").click(function () {
  $(this).closest('div').siblings(".box").slideToggle();
  if ($(this).text() == "max") {
    $(this).text('min');
  } else {
    $(this).text('max');
  }
});