私はリストのようなFAQのために次のコードを持っています。ユーザーがボタンをクリックすると、情報が下にスライドしてコンテンツが表示されます。次に、同じボタンをクリックしてコンテンツを閉じることができます。
このページには複数のリストがあるので、リストが開いていて、ユーザーが別のリストをクリックして開くと、開いているリストが閉じて、他のリストが開きます。そうすれば、ユーザーは1マイルの長さのスクロールバーを持っていません。
これが私のコードです:
JS
$('.service').live('click',function(){
$(this).parent().children().toggle(); //swaps the display:none between the two spans
$(this).parent().parent().find('.content').slideToggle(); //swap the display of the main content with slide action
});
$('.service').click(function(e) {
e.preventDefault(); //Prevents link from taking them to top of page
});
HTML
<div class="service-container">
<div class='service-title'>
<a href="#" class="service fancy_button"><span style="background-color: #0f071e;"><i class="icon-plus"></i> Open</span></a>
<a href="#" class="service fancy_button" style="display:none;"><span style="background-color: #666;"><i class="icon-minus"></i> Close</span></a>
</div>
<div class='content' style='display:none;'>
<p>My Content</p>
</div>
</div>
これを行うためのより良い方法があれば、コードを書き直してもかまいません。
アイデア: