Minimize Maximize The Div ? Javascript Or Jquery Which Works For All The Div

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

); 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.

Solution 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.

Solution 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');
  }
});

Share