javascript (Jquery)でaccordionを作成する場合

Question

あけましておめでとうございます。
div #btnを押すとdiv #boxが開くaccordionを制作したいのですが、プラグインやUI等である
accordionは概ね上から下にスライドするものばかりかと思います。
これをdiv #boxの左上の頂点から右下の頂点に向けて広がるようなaccordionを探しております。

イメージですが、ブラウザを最小にして左上に持って行き、ブラウザの右下をつかみそのまま右下を
ドラッグした場合にウィンドウが左辺、上辺、右辺及び底辺が等倍で（対角線に左上から右下に？）広がっていくようなイメージです。

このような、accordionを制作は可能でしょうか？

よろしくお願い申し上げます。

<div id="btn" style="width:100px;height:50px;">push</div>
 <div id="box" style width:200px: height;100px></div>

Answer 1

jQueryUI の Size Effect とかはいかがでしょう？
Size Effect | jQuery UI API Documentation

$('#btn').on('click', function(){
  $('#box').toggle( 'size', { to: { width: 0, height: 0 } } );
});

あとは、CSSのtransitionを使ってもいいのでは。

$('#btn2').on('click', function(){
  $('#box2').toggleClass( 'hide' );
});

#box2{
  transition:1s;
}
#box2.hide{
  width:0px;
  height:0px;
}

サンプル

Comments

[SugiuraY]

ご回答ありがとうございます。無事CSSのやり方で実装できたのできました。
#box2.hideのセレクタだけわからないのですが、
これはどのような指定方法なのでしょうか？
なぜなら、hideクラスを指定すればwidth:0px等が効きそうですが、実際には.hide{width:0px;height:0px;}では実装できませんでした。

[Lhankor_Mhy]

CSS詳細度の問題です。
興味があればググってもいいと思いますが、基本的には活用しないほうがいい仕様なので見ないことをお勧めします。

回答のコードは、とりあえずご提示のコードにあわせるために書いたものであり、そのセレクタの書き方は最近のCSSの流れから言うと「クソコード」だと思います。真似をしないでください。

[Lhankor_Mhy]

なんか言葉が足りないですね。

CSS詳細度について学ぶより、「BEM」「OOCSS」などでググって最近の傾向を学んだ方が無難、ということが言いたかったのです。

[SugiuraY]

コメントありがとうございます。
承知をいたしました、素直にBEM」「OOCSS」を調べてみようと思います。
ご丁寧にありがとうございます。