CSS transitions adjustable height

Question

I found this How can I transition height: 0; to height: auto; using CSS? and I have been trying to use this method to change the height of a div on button onclick but for some reason it is not working for me. Sorry if there is a lot of unnecessary information.

jQuery

function playSound(soundfile){
      document.getElementById("dummy").innerHTML = 
      "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}

   $('button').bind('click', function(e) {
         e.preventDefault();

   $('.taller').toggleClass('animated');
   });

HTML

  <div id="container">
     <span id="dummy"></span>
     <button onclick="playSound('sound/button-30.wav','sound/button30.mp3');">PlaySound</button>                         
     <div class="taller">I SHOULD BECOME TALLER</div>
  </div>

CSS

#container{
background-color:lightblue;
width:960px;
height:550px;
}

.taller{
overflow:hidden;
background:#000;
color:#fff;
width:80px;
max-height:15px;
-webkit-transition: max-height .5s linear;
-moz-transition: max-height .5s linear;
transition: max-height .5s linear;
}

.animated{
max-height:100px;
}

score 0 · Answer 1 · answered Sep 18 '12 at 03:54

0

I put your code into a jsfiddle and tested it. It works just fine; I didn't do anything to it. You can see your code in action here http://jsfiddle.net/WY7gM/

answered Sep 18 '12 at 03:54

scottmgerstl

765
8
18

Yes, that is what I want but for some reason it is not working in Aptana Studio or in my browser. – ocat Sep 18 '12 at 04:12
Do you know why this might be happening? It works fine in jsfiddle. – ocat Sep 18 '12 at 04:14
if you open up your debugger in either firefox or chrome, look at the console to see if there are any errors caused in any other parts of your script. It could be, the code works great but its not able to make it that because of an error. – scottmgerstl Sep 18 '12 at 04:30
The only other thing I can think of is that you are using your ids more than once and the one you are expecting to use is the second (or third) one (getElementById only returns first occurrence). Beyond that, without more context or debugging through it myself, I don't know. – scottmgerstl Sep 18 '12 at 04:45

score 0 · Answer 2 · answered Sep 18 '12 at 03:56

0

Is this what you're looking for?

Live Demo

Changed it to height rather than max-height and it worked fine. On toggle it will grow/shrink. Your question is a bit vague though so I'm not sure if this is what your after. Also why not just put the playsound functionality inside the click bind?

answered Sep 18 '12 at 03:56

Loktar

34,764
7
90
104

Your right about the playsound functionality. I guess my question is more about why it is not working in my browser when I open the source file from Aptana. – ocat Sep 18 '12 at 04:16

CSS transitions adjustable height

2 Answers2