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

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

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Dec 4, 2017 at 20:47 Milad Rashidi 1,37644 gold badges2323 silver badges4040 bronze badges asked May 16, 2014 at 13:36 SturvSturv 3911 gold badge11 silver badge44 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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/ygalanter/BLE6N/

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>

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>

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