How can I implement a "maximize" button in JavaScript?

Question

I have one parent DIV, with two inner DIVs, each taking up 50% of the screen. Looking for suggestions to achieve the following:

• I would have a 'Maximize button' on each of those inner DIVs, which would set the width of the DIV on which the button was clicked to 100% width of the parent DIV, making the other one invisible.

I believe jQuery Resizable is a bit too much for this, agreed?

Answer 1

if you're already using jQuery, you could do:

$(".innerDiv").click(function() {
   $(".innerDiv").hide();
   $(this).css("width", "100%").show();
});

Which will first hide both inner divs, then change the CSS of the clicked div to 100% and show it. Maybe not the most efficient way, but it should work (:

You could even change the .css to .animate to juice it up a little.

Answer 2

With a little css you can select which elements are visible by setting the class of the parent element.

CSS:

<style type="text/css">
#Parent.both .left { float: left; width: 50%; }
#Parent.both .right { float: left; width: 50%; }
#Parent.left .right { display: none; }
#Parent.right .left { display: none; }
</style>

Javascript:

<script type="text/javascript">
function show(c) {document.getElementById('Parent').className=c;}
</script>

HTML:

<div id="Parent" class="both">
   <div class="left">left</div>
   <div class="right">right</div>
</div>
<input type="button" value="both" onclick="show('both');" />
<input type="button" value="left" onclick="show('left');" />
<input type="button" value="right" onclick="show('right');" />