アコーディオン式に開いたり閉じたり

JavaScript

きっと探すと、jQueryとかを利用するやつしかみつけられないだろうから
徹夜して書いた。十数行だけどね。自分のレベルは、この辺だな ^^;

<!DOCTYPE html>
<title></title>

<style type="text/css">
  #fuga { width:500px; font-size:40px; background:#ccc;}
</style>

<body>
  <p>
    <input type="button" value="open/close" onclick="hoge.toggle()">
  </p>
  <div id="fuga">
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
  </div>

<script type="text/javascript">

var Shutter = function ( n, g ) {
  var tmid = 0, time = 0, span = 20, s = n.style;

  this.open = function ( ) { start (g = Math.abs(g)) };
  this.close = function ( ) { start (g = -Math.abs(g)) };
  this.toggle = function ( ) { start (g *= -1) };
  
  function stop ( ) { tmid && clearInterval( tmid ); tmid = time = 0 };
  function start ( ) { stop(); tmid = setInterval( move, span ) };

  function move ( ) {
    var y = n.offsetHeight + g * (time += span) |0;
    if (((n.scrollHeight < y) && (y = n.scrollHeight)) || ((y < 0) && !(y=0))) stop();
    s.height = y + 'px';
  };
  n.style.overflow = 'hidden';
  0 < g ? this.open(): this.close();
};


Shutter.create = function (eid, g) {
  var n = document.getElementById (eid);
  return n ? new Shutter (n, g || 9.8): null;
};

var hoge = Shutter.create ('fuga', -0.12); //第２引数がマイナスだと、clocs()が呼ばれ閉じる

</script>