How do I make an expandable box with CSS and javascript?

Question

EDIT: I should have specified that I want it to be animated, and retractable. So why isn't the + sign moving with the rest of the box? And why isn't it animated? I have the transition CSS.

I know this has been asked before, but I tried writing my own, and it's just... not working. Check the jsfiddle to see what I mean.

I'm not trying to use too much Javascript. All I use it for is to toggle the state of the menu. Everything animation needs to be CSS. Now, the only thing confusing me is why this doesn't work?

jsfiddle: http://jsfiddle.net/bjhph51u/1/

HTML:

<div id="expandbox" expanded="false">
<input name="username" type="text" placeholder="Username" disabled></input>
<input name="password" type="password" placeholder="Password" disabled></input>
<button type="submit" disabled>go</button>
</div>
<a href="#" id="plus" onclick="expandBox()">
+
</a>

Javascript:

//expand top box
var box = document.getElementById("expandbox");
function expandBox(){
    if(box.getAttribute("expanded")=="false"){
        box.setAttribute("expanded","true");
        box.style.height="100px";
        box.style.display="block";
    }else{
        box.setAttribute("expanded","false");
        box.style.height="0px";
        box.style.display="none";
    }
}

CSS:

#expandbox {
    display:none;
    position:fixed;
    height:0px;
    -webkit-transition:height 0.5s;
    transition:height 0.5s;
    -o-transition:height 0.5s;
    -moz-transition:height 0.5s;
}

Please help me, thanks in advance!

score 2 · Answer 1 · answered Dec 10 '14 at 11:03

2

The problem is, that you function is a local variable in the anonymous function assigned to window.onload. Change you fiddle options at: Frameworks & Extensions to No wrap - in <body>. This way the function will become global, and you can call it just fine.

answered Dec 10 '14 at 11:03

meskobalazs

15,741
2
40
63

Awesome! Now my only issue is the actual animation. Why is the + disappearing and why isn't it animating? – hexagonest Dec 10 '14 at 11:10
There is no animation between `display: none` and `display: block`. As it makes no sense whatsoever. First, change it to `display:block`, then animate between opacity 0 and 1. – meskobalazs Dec 10 '14 at 11:12
What about between height? I set height:0px then height:100px – hexagonest Dec 10 '14 at 11:12
Oh man you just solved my problem. Thanks! But what about this little +? Why isn't it moving? – hexagonest Dec 10 '14 at 11:16
It is because the position of you div is fixed. You should wrap your anchor with another div, and try to order them as you want. – meskobalazs Dec 10 '14 at 11:19

score 1 · Answer 2 · answered Dec 10 '14 at 11:09

I have edited the HTML & JS code as below and it's now working fine. Give it a try!!

HTML Code:

<div id="expandbox" expanded="false">
        <input name="username" type="text" placeholder="Username" disabled></input>
        <input name="password" type="password" placeholder="Password" disabled></input>
        <button type="submit" disabled>go</button>
</div>
<a href="#" id="plus">+</a>

JS Code:

//expand top box
var box = document.getElementById("expandbox");
function expandBox(){
    if(box.getAttribute("expanded")=="false"){
        box.setAttribute("expanded","true");
        box.style.height="100px";
        box.style.display="block";
    }else{
        box.setAttribute("expanded","false");
        box.style.height="0px";
        box.style.display="none";
    }
}
document.getElementById("plus").onclick = expandBox;

score 0 · Answer 3 · edited Dec 10 '14 at 11:38

0

you can try something like this:

$('#plus').click(function() {
   $('#expandbox').toggle("slow");
});

edited Dec 10 '14 at 11:38

Felipe Oriani

37,948
19
131
194

answered Dec 10 '14 at 11:02

Sharma Vikram

2,440
6
23
46

I do not want to use jQuery as it is not required for this kind of stuff. Thanks anyway! – hexagonest Dec 10 '14 at 11:08

How do I make an expandable box with CSS and javascript?

3 Answers3