<h2>
これを行うために必要なのは、がクリックされたときに各検索領域を切り替えることです。
要素のクラスアイコンマイナスとアイコンプラスを切り替えるためにも必要<h2> <span>
です。(フォントをインストールする必要があるため、これは私のフィドルには表示されません。)
ロード時に、最初の検索領域のみが表示され、残りは非表示になります(display:none)。
また、現在の検索領域とアイコンを切り替える機能も必要です。
<h2>
これを行うために必要なのは、がクリックされたときに各検索領域を切り替えることです。
要素のクラスアイコンマイナスとアイコンプラスを切り替えるためにも必要<h2> <span>
です。(フォントをインストールする必要があるため、これは私のフィドルには表示されません。)
ロード時に、最初の検索領域のみが表示され、残りは非表示になります(display:none)。
また、現在の検索領域とアイコンを切り替える機能も必要です。
あなたはこのようにそれを行うことができます。現在のdivが他のdivに隠されないように、 .not()を追加する必要があります。
$('.s-container h2').on('click', function () {
var $el = $(this);
var div = $el.next('.s-area');
$('.s-area').not(div).hide(); // hide all but the current one that is toggling
div.slideToggle('fast',function(){
// add correct class accordingly to the h2 elemeents
$('.s-container h2').attr('class',function(){
return $(this).next('.s-area').is(':visible') ? 'icon-minus' : 'icon-plus';
});
});
});