Bootstrap 2.3.2を使用して、 Collapse プラグインを使用してトグル ボタンを使用してテキストを表示および非表示にしましたが、私が見る限り、要素のコンテンツ全体を表示および非表示にすることしかできません。
私が必要としているのは、要素のコンテンツの 170px を既に表示し、ボタンをクリックすると、要素内の残りのテキストが表示されることですが、追加の要素を追加せずにこれを行う必要があります。身長。
これはブートストラップで可能ですか? そうでない場合は、jQuery?
Bootstrap 2.3.2を使用して、 Collapse プラグインを使用してトグル ボタンを使用してテキストを表示および非表示にしましたが、私が見る限り、要素のコンテンツ全体を表示および非表示にすることしかできません。
私が必要としているのは、要素のコンテンツの 170px を既に表示し、ボタンをクリックすると、要素内の残りのテキストが表示されることですが、追加の要素を追加せずにこれを行う必要があります。身長。
これはブートストラップで可能ですか? そうでない場合は、jQuery?
これは、要素のスタイリングに CSS を使用し、Javascript を介してクラスを適用することで実行できます。
HTML:
<div class="toggle">
your huge text here...
</div>
CSS:
.toggle{
height:170px;
}
.open{
height:auto;
}
および JS (jQuery を使用):
$('.toggle').on('click', function () {
$(this).toggleClass('open');
});
スクリプトが基本的に行うことは、クリックしたときに検出され、クリックされた場合は、プロパティをに設定.toggle
するクラスを切り替えて、テキストを持つ要素を可能な限り大きくします。.open
height
auto
これが実際の例です:http://jsfiddle.net/8SXNZ/1/