クリックすると上に開くアコーディオン

質問

当方、設置とCSSによる表示のカスタマイズはできますが、プログラムの修正はできないためぜひ皆様のお知恵をお貸しください。よろしくお願いいたします。

現在、スマホ向けサイトをコーディング中なのですが、コンテンツをアコーディオンで作成したいと考えています。
タイトルをクリックすると中のコンテンツが見える仕組みは同じなのですが、クリックするとタイトルが下に下がり、その上にコンテンツを開くという動作をさせたい場合はどの部分をどのように修正すればよいのでしょうか？
アドバイスどうぞよろしくお願いします。

【acordion.js】
$(function(){
$(".acordion").hide();
$("h3").click(function(){
$(this).next().slideToggle();
$(this).toggleClass("open");
});
$(".acordion .close").click(function(){
$(this).parent().slideToggle();
});
});

【acordion.jsを読み込んだHTML】
<h3>コンテンツのタイトル</h3>
<div class="acordion">
コンテンツの中身。この部分をタイトルの上に開きたいです。<br />
文章量は固定ではないため、可変に対応できると嬉しいです。
<div class="close">close</div>
</div>

回答No.1

cero_d · ベストアンサー

htmlの divタグ と h3タグ の位置修正と、それに伴ってacordion.jsの next を prev に修正すれば可能です。

【acordion.js】
$(function(){
$(".acordion").hide();
$("h3").click(function(){
// $(this).next().slideToggle();
$(this).prev().slideToggle();
$(this).toggleClass("open");
});
$(".acordion .close").click(function(){
$(this).parent().slideToggle();
});
});

【acordion.jsを読み込んだHTML】
<div class="acordion">
コンテンツの中身。この部分をタイトルの上に開きたいです。<br />
文章量は固定ではないため、可変に対応できると嬉しいです。
<div class="close">close</div>
</div>
<h3>コンテンツのタイトル</h3>

お礼

夏休みを取っておりまして、お礼が遅くなって申し訳ありません。

ご指示の通りに修正したところ、無事思った通りの動きを再現することが出来ました！
少し修正するだけだったとは・・・大変勉強になりました。

ありがとうございました！