Expand/Collapse Div

Question

divを展開するボタンとdivを展開するボタンの2つを作成しようとしています。私はこのコードを修正しようとしましたが、うまくいかないようです。私はちょうどリンクを切り替える方法を理解していないと思う。

また、ページが読み込まれたときにDIVを表示しようとしています。私はコードを書いている方法でこれが可能かどうかもわかりません。

これを動作させるには、何が必要なのか理解できたら助けてくれる人がいますか？

http://jsfiddle.net/XUjAH/93/

私は.slideUpを使用しないようにしようとしています/ .slideDownそれは私がページ上で使用しています別のプラグインと干渉しているようです。

$('#click-meopen').click(function() { 
    var height = $("#this").height(); 
    if(height > 0) { 
     $('#this').css('height','0'); 
    } else { 
     $("#this").css({'position':'absolute','visibility':'hidden','height':'auto'}); 
     var newHeight = $("#this").height(); 
     $("#this").css({'position':'static','visibility':'visible','height':'0'}); 
     $('#this').css('height',newHeight + 'px'); 
    } 
}); 

$('#click-meclose').click(function() { 
    var height = $("#this").height(); 
    if(height > 0) { 
     $('#this').css('height','0'); 
    } else { 
     $("#this").css({'position':'absolute','visibility':'hidden','height':'auto'}); 
     var newHeight = $("#this").height(); 
     $("#this").css({'position':'static','visibility':'visible','height':'0'}); 
     $('#this').css('height',newHeight + 'px'); 
    } 
}); 

Answer 1

あなたは、あなたが必要とするすべての$("#this").toggle('slow');あるtoggle使用することができますが、あなたはあなたがボタンにこれを変更しようとしているdisplay: none;

Answer 2

でheight: 0;を交換する必要がある場合は？

<input type="submit" id="click-meopen" value="open"></input> 
<input type="submit" id="click-meclose" value="close"></input> 
<div id="this">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div> 

これは難しくありません。

また、.toggle()または​​のjQueryメソッドを使用することをお勧めします。ちょうどCSSの高さプロパティを0に設定するのは良い方法ではありません。

ページがロードされているとき、またはロードが完了しているときにdivを表示しますか（DOMが準備完了です）？

あなたのJavaScriptコードは次のようになります。

$('#click-meopen').click(function() { 
    $('#this').show(); // or .toggle() 
}); 

$('#click-meclose').click(function() { 
    $('#this').hide(); // or .toggle() 
});​ 

あなたは​​方法に固執そうでない場合、.toggle()メソッドを使用する必要がある唯一のボタンを使用する場合は！ DOMの準備ができたら

（ページが完全にロードされます）：使用されている方法の

$(document).ready(function(){ 
    $('#this').show(); 
}); 

ドキュメント：

• http://api.jquery.com/show/
• ​​
• http://api.jquery.com/toggle-event/
• http://api.jquery.com/ready/

Answer 3

$('#click-meopen').click(function() { 
    $('#this').show(); 
}); 

$('#click-meclose').click(function() { 
    $('#this').hide(); 
});​ 

http://jsfiddle.net/XUjAH/95/

またはトグル私はあなたがクロムに​​私の作品が、私はあなたはそれが仕事をしたいと思い-webkit-transitionを使用していたことがわかり

$('#click-meopen').click(function() { 
    $('#this').toggle(); 
}); 

http://jsfiddle.net/XUjAH/96/

Answer 4

とWebkit以外のブラウズでは

私は示唆することができる2つの方法があります.1つは単に-moz-transition: height 1s ease-in-out;とtransition: height 1s ease-in-out;を追加してcss3でそれを行うことですが、それは古いブラウザでは役に立たないことです。

他の方法は、あなたが崩壊したいのdivにテキスト内のdiv要素を配置することです。そして、あなたはJavaScriptにあなたは、内側のdiv要素の高さを取得することができます

<div id="this"> 
    <div id="height"> 
     text 
     text 
    </div> 
</div> 

、およびその方法でheight：autoの代わりにanimateを使うことができます。

$('#click-meopen').click(function() { 
    $('#this').animate({'height': $('#height').height()}, 1000); 
}); 

$('#click-meclose').click(function() { 
    $('#this').animate({'height': 0}, 1000); 
}); 

これで十分です。

Answer 5

すべての次のテキストはただ私見です:)

ここに私のexmpleを参照してください - http://jsfiddle.net/XUjAH/99/

HTML：JS用として

<p id="click-meopen">click me to open</p> 
<p id="click-meclose">click me to close</p> 
<div id="this"> 
    <div id="content">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div> 
</div> 

：

$('#click-meopen').click(function() { 
    $("#this").height($("#content").height()); 

}); 
$('#click-meopen').click(); 

$('#click-meclose').click(function() { 
    $("#this").height('0'); 
});​ 

を

はCSSと同じでなければなりません。

UPD： 'height：auto' - divを最初から表示するとアニメーションが少し薄れて見えますが、閉じるボタンは最初のクリックでアニメーションを無視します（私は最新のアップデートでChromeを持っています）。いくつかの回避策を追加しました。また、FirefoxやOperaなどの他のブラウザや、-webkitをサポートする人だけでなく、このアニメーションをサポートするための他のスタイルも追加されました。 JSで

.with-animation { 
    -webkit-transition: height 1s ease-in-out; 
    -moz-transition: height 1s ease-in-out; 
    -o-transition: height 1s ease-in-out; 
    transition: height 1s ease-in-out; 
} 

：：私たちのdiv要素は、すでに適切なサイズを持って、この行 //瞬時防ぎしかし // CSS追加されたクラスとメインのスタイルから取り除か '転移' で

http://jsfiddle.net/XUjAH/110/

最初のクリックで閉じる、理由は分かりません。 $（ "＃container"）。height（$（ "＃content"）。あなたはそれが閉じた後、再表示されます密接なリンクをクリックして、いくつかの理由

$('#click-meopen').click(function() { 
    $("#container").height($("#content").height()); 
}); 

$('#click-meclose').click(function() { 
    // If we add class with-animation on upper level div will 
    // start animation on page load 
    $("#container").height('0').addClass("with-animation"); 
}); 

Answer 6

$('#click-meopen').click(function() { 
     $("#this").css({'position':'absolute','visibility':'hidden','height':'auto'}); 
     var newHeight = $("#this").height(); 
     $("#this").css({'position':'static','visibility':'visible','height':'0'}); 
     $('#this').css('height',newHeight + 'px'); 
    }); 

    $('#click-meclose').click(function() { 
     $('#this').css('height','0'); 
    }); 

    $('#click-meopen').click(); 

http://jsfiddle.net/XUjAH/100/