表の横展開について

Question

javascript初心者ですそのまま貼りますのでどなたか教えてください。
よろしくお願いします。
以下は下方向に展開するようになっていますが、これを横方向（右）に展開する場合はどのように書き換えればよいのでしょうか。
slideUPとslideDownを書き換えれば良いと思っているのですが・・・
よろしくお願い致します。

$('.tbl-month-head .btn').click(function(){
var detail = $(this).parents('.tbl-month').find('.tbl-month-detail');
if($(this).hasClass('active')){
detail.stop(true,true).slideUp();
$(this).removeClass('active');
}else{
detail.stop(true,true).slideDown();
$(this).addClass('active');
}
});

Comments

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

HTMLが提示されていないので、試していません。セレクタは適宜変更してください。

$("table").animate({width: "toggle"});

$.animateでは数値のほかに"show"、"hide"、"toggle"の3つの文字列を指定することができるようになっています。バラバラに使う場合は"show"と"hide"を。

widthに使用すると、横方向のスライドアニメーションになります。displayも同時にblock/noneに変更されますので、slideUp/slideDownと同様の使い勝手かと思います。

---

それから、jQuery UIにはSlide Effectという機能があります。

Slide Effect | jQuery UI API Documentation
https://api.jqueryui.com/slide-effect/

widthの操作は原則、左から出て左に消えるというものですが、こちらはdirectionでrightを指定すると、右から出て右に消える、という動きが得られます。

このためだけにjQuery UIを読み込むメリットがあるかはわかりませんが、解決手段の1つにはなるかと思います。

Comments

[退会済みユーザー]

ありがとうございます！この方法でうまくいきました！

Answer 2

jQuery本体には横スライドはなさそうです
jquery-ui.jsの利用を検討ください

<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(function(){
  $('input[type=button]').click(function(){
    $("#sample1").show("slide", {direction: "left"}, 1000);
    $("#sample2").show("slide", {direction: "right"}, 1000);
  }); 
}); 
</script>

<input type="button" value="show">
<div id="sample1" style="display:none;width:100px;height:100px;background-Color:lime;">sample1</div>
<div id="sample2" style="display:none;width:100px;height:100px;background-Color:aqua;">sample2</div>

Comments

[退会済みユーザー]

ありがとうございます！この方法でも出来るんですね！