如何在单击按钮时使div的高度更大，然后再次单击时又变回其原始高度？

Question

I have a div id="coding" set on height:300px on CSS . when I click another div id="menu" , I want #coding to change it's height to 800px . I managed to do that like this

<script>
    function changec() {
        document.getElementById('coding').style.height = "800px";
    }
</script> 

Now, when click the #menu again, I want the height to get back to it's original 300px value. Can someone help? The code is:

HTML

<div id="coding">
<div id="menu" onclick="changec()">≡</div>
...
</div>

CSS

#coding{
    ...
    height:300px;
}

Answer 1

Simple check if the value is set - remove it (then CSS height will take over).

function changec() {
       var xDiv = document.getElementById('coding');

       if (xDiv.style.height == '') 
           xDiv.style.height = '800px'
       else 
           xDiv.style.height = ''
}

Demo: http://jsfiddle.net/ygalanter/BLE6N/

Answer 2

one of the solution for your problem is as follows: First count how many times you click on #menu now depending on your expectation you can change the javascript as follows

<script type="text/javascript">
    var count = 0;
    function changec() {
        count++;
        if(count%2==1)
            document.getElementById("coding").style.height = "800px";
        else
            document.getElementById("coding").style.height = "300px";
    }
</script>

Answer 3

Another alternative solution is

<script type="text/javascript">
    function changec() {
        var currentheight = document.getElementById('coding').clientHeight;
        if (currentheight == 300)
            document.getElementById('coding').style.height = "800px";
        else if (currentheight == 800)
            document.getElementById('coding').style.height = "300px";
    }
</script>

Answer 4

Not sure why you tagged jQuery since you didn't use it, but still...Considering the possibility that you are willing to use/learn it, I created a jsFiddle for it: http://jsfiddle.net/Tm2Hd/ .

CSS :

#coding{
    border:1px solid black; /*optional: Keep track of your div's expand*/
    height:300px;
    }
#coding.larger{
    height:800px;
    }

JS :

 function changeHeight() {
    if($('#coding.larger').length>0)
    {
       $('#coding').removeClass("larger");
    }
    else
    {
       $('#coding').addClass("larger");
    }
}

HTML

<div id="coding">
    <!--<div onclick="changeHeight()">≡</div> 
       Personally, I don't suggest using divs as clickable objects... Why don't you use buttons instead?
  -->
   <button onclick="changeHeight()">≡</button> 
    ...
</div>

My solution to your problem is: Create a new class named larger , pointing to your div, and toggle between this and the original whenever you click the button.