当方、設置と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ベストアンサー
- 回答日時:
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>
夏休みを取っておりまして、お礼が遅くなって申し訳ありません。
ご指示の通りに修正したところ、無事思った通りの動きを再現することが出来ました!
少し修正するだけだったとは・・・大変勉強になりました。
ありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript 【Javascript】ボタンクリックで2つのclassに対し、それぞれ別のclassを追加したい 1 2022/07/29 20:52
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
functionから別のfunctionを実...
-
idを使わずにonclickで自身の要...
-
関数でy=g(x)のgとは何の略です...
-
jslintのエラーについて質問
-
getElementByIdを使用したグロ...
-
jQueryの :not() .not() が有効...
-
ASP.NET MVCでObjectをjsに渡す
-
C#テキストボックスの文字を配...
-
JavaScript window.openで開く...
-
Vb.netのグローバル変数の宣言...
-
C# 演算 奇数と偶数 表現の仕方
-
C#OpenCv V4にのエラーに関する...
-
【Jquery】changeイベント毎にa...
-
google apps scriptの終了のさせ方
-
JavaScriptでテーブル内?に矢...
-
二次元配列の全要素の全要素を...
-
ローカルにあるファイルを検索...
-
同じIDで定義した要素の配列を...
-
javascriptでCSVを呼出しvlookup
-
C#で、ContextMenuStripに動的...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
idを使わずにonclickで自身の要...
-
functionから別のfunctionを実...
-
関数でy=g(x)のgとは何の略です...
-
jslintのエラーについて質問
-
クリックすると上に開くアコー...
-
XMLHttpRequestでキャッシュを...
-
要素名がスペースを含む場合のj...
-
function(e)の意味を教えてくだ...
-
ajax反映後のjqueryが動かない
-
jQueryの :not() .not() が有効...
-
jQueryでzipを解凍読み込みする...
-
getElementByIdを使用したグロ...
-
関数名をテキストから読み込む...
-
jqueryuiのdialog
-
XMLHttpRequestオブジェクトが...
-
jqueryのグローバル変数とロー...
-
jQuery 同じ処理を関数にまとめ...
-
drawImageの描画順序の指定につ...
-
addEventListener()でリスナー...
-
jQueryが読み込めない
おすすめ情報