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!
3 answers
solution1
2 2014-12-10 11:03:07
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.
solution2
1 2014-12-10 11:09:48
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;
solution3
0 2014-12-10 11:02:39
you can try something like this:
$('#plus').click(function() {
$('#expandbox').toggle("slow");
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.