HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

質問項目をクリックするとその回答がビローンと展開するアコーディオン

スポンサーリンク

Q&Aのページなどで質問項目をクリックするとその回答がビローン”と展開される ページってよくありますよね?

一般的には、アコーディオンとよばれるモジュールです。

あれは、どうやっているかといえば、css の id を指定して、そのIDの display 属性を hidden(非表示) にしたり、display(表示)にしたりして実現しています。

たとえば、
Q1、質問
<div id="ans">答え</div>
こんな感じに書いておいて、 最初は、id anser の 表示属性を hide にしてしまいます。

Q1、の領域をクリックされた時 id anser の 表示属性を display にしてあげれば、id anser の領域が表示され、ビローンと伸びて表示される仕組みです。

大雑把に書くと
<input type="button" value="Q1、質問<" onclick="clickBtn1()" />
<div id="ans1">答え</div>
 :
<script>
field_display();
var flip1
function field_display()
{
var ans1= document.getElementById('ans1');
ans1.style.display ="none";
flip1=0;
}
function clickBtn1()
{
var ans1= document.getElementById('ans1');
if(flip1==1){
ans1.style.display ="block";
flip1=0
}else{
ans1.style.display ="none";
flip1=1
}
}
</script>

アコーディオンで問題になるのは、状態の保持とアクションのフックです。

以下を例としてアコーディオンの説明します。
<div id="ans1">Q1、質問</div>
<div id="ans1">答え</div>


アコーディオンを実現するためのアクションフック


アクションのフックもいろいろな方法が考えられ例のようにボタンのクリックアクションをトリガーにするのが一番簡単。

よく使われるのが、Jquery を使う方法です。

jQuery のアクションフック


jQuery のアクションフックは、以下のような書式で使用できます。

要素.on( イベント名, 関数 )

前述の例で que1 のクリックイベントをフックするなら
<script>
    $('que1').on('click', function() {
        clickBtn1();
    })
</script>

イベントは、複数指定できるので

<script>
    $('que1').on('click mouseover', function() {
        clickBtn1();
    })
</script>
といった方法も考えられます。

イベント一覧

イベント名内容
changeフォーム部品に変化があった
click要素がクリックされた
blur / focus要素にフォーカスが当たった(focus) / 外れた(blur)
loadドキュメントが読み込まれた
resizeウィンドウサイズが変わった
scroll画面がスクロールした
keyup / keypressキーボードが押された時(keypress)、離された時(keyup)
mouseup / mousedownマウスのボタンが押された(mousedown)、離された(mouseup)
mousemove指定の要素内でマウスが乗った
submitフォームが送信された
errorJavaScriptエラーが発生した





スポンサーリンク





アコーディオンの状態保存


次に問題になるのが状態の保存です。
前述のように変数に状態を保存するのがプログラムとしては基本ですけど、javascriptでは、slideToggleという便利なものが存在しています。

これは、呼び出すたびにフリップフロップ(状態が交互に変わる)を実現します。
 

質問項目をクリックするとその回答がビローン”と展開する方法まとめ


<ul>

<li><p><a class="que" data-target="que1">メニュー1</a></p>
<ul id="que1">
<li>回答1</li>
</ul>
</li>

<li><p><a class="que" data-target="que2">メニュー2</a></p>
<ul id="que2">
<li>回答2</li>
</ul>
</li>

</ul>

<script>
$(function()
{
	$( '.que' ).click( function()
	{
		var target = $( this ).data( 'target' ) ;
		$( '#' + target ).slideToggle() ;
		return false ;
	} ) ;
}) ;
</script>

class que のクリックで click(function が起動します。
que の data-target を読み込んで、それで操作する対象の id とします。
slideToggle によって、その 対象を消したり、表示させたりします。

この記述で失敗する多くの原因は、jQuery を先に読み込ませていた場合に起こります。

このソースを表示してから JQuery を呼び出すようにします。

前述ソース
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

読み込みの順番がおかしかったりすると デベロッパーツールで
Uncaught TypeError: $ is not a function
といったエラーメッセージが表示されることになります。


自分自身をビローンと伸ばすアコーディオンの実装は、details,summary を使うとすこぶる簡単


自分自身をビローンと伸ばすアコーディオンの実装は、details,summary を使うと JavaScriptを使用する必要がありません。

こんな感じ。
<details>
    <summary>質問1</summary>
    回答1
</details>
<details>
    <summary>質問2</summary>
    回答2
</details>

三角形のCSSも使ってません。

もちろん、デザイン的にこのままだとみっともないのでスタイルシートを使ってデザインを整えます。

JavaScript を使わない分、配置する場所にも悩まずに使えるのが便利です。

質問1 回答1
質問2 回答2

スポンサーリンク

関連記事

スポンサーリンク

よく使うタグ

・float クリア
<br clear="all"><div style="clear:both;" class="clearfix"></div>
・角丸め
round-radius
border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;
・div box
overflow:scroll;min-width:300px;max-width:300px;min-height:300px;max-height:300px;
・TEXTAREAリサイズ
resize: vertical;
・サイトURL
home_url() // http://…
if(site_url()==home_url){
$shorturl_yuzu_path = substr(ABSPATH,0,strpos( ABSPATH, substr(site_url(),strlen(home_url()) ) ) ).’/’;
}else{
$shorturl_yuzu_path = ABSPATH.’/’;
}
// /var/…
・WP HOME URL
site_url() // http://…/wp
ABSPATH // /var/…/wp
・プラグイン(自分のDIR追加必要)
plugins_url() // http://…/plugins
WP_PLUGIN_URL // http://…/plugins
WP_PLUGIN_DIR // /var/…/plugins
・使用中のテーマ
get_template_directory_uri() // http://…/theme/xx
get_template_directory() // /var/…/theme/xx
・wp-content
content_url() // http://…/wp-content
WP_CONTENT_DIR // /var/…/wp-content
・画像URLからDIR変換
$pctdir=str_replace(content_url(), WP_CONTENT_DIR,$pcturl);
・パス名分解
$pathData = pathinfo($file);
echo $pathData["dirname"]; // /var/~
echo $pathData["filename"]; // xxx
echo $pathData["extension"]; // txt
echo $pathData["basename"]; // xxx.txt
・画像サイズ
list($width,$height) = getimagesize($url);
if(has_post_thumbnail()){
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_img = wp_get_attachment_image_src( $thumbnail_id , ‘full’ );
$src = $image[0]; //url
$width = $image[1]; //横幅
$height = $image[2]; //高さ
・画像サイズ比率
list($src_w,$src_h) = getimagesize($file);
$dst_w = 600;$dst_h = 0;
$dst_h = ($dst_w!=0)?(intval(($src_h*$dst_w)/$src_w )):(($dst_h!=0)?(intval(($src_w*$dst_h)/$src_h)):0);
・疑似要素順
link visited hover active


特殊文字
シングルクォート : &#39;
ダブルクォート : &quot;
WP設定内表示前処理(htmlタグ許可項目)
$str = str_replace(‘<','&lt;' ,$str);
$str = str_replace(‘>’,’&gt;’ ,$str);
$str = str_replace(‘\”‘,’&quot;’,$str);
$str = str_replace(“\'”,’&#39;’ ,$str);
WO設定項目表示前処理(htmlタグ許可項目)
$str = str_replace(‘\”‘,'”‘,$str);
$str = str_replace(“\'”,”‘”,$str);
・テーマ
get_theme_root_uri()
get_theme_root()
・WP 情報
get_bloginfo( $show )
・Wp config FTP 情報 設置
define( ‘FTP_HOST’, ‘host’ );
define( ‘FTP_USER’, ‘id’ );
define( ‘FTP_PASS’, ‘pw’ );
define( ‘FTP_SSL’, false );
弾に使う
placeholder:ユーザー入力補助

カテゴリー

jQuery ボタンを押しても反応しない

jQuery ボタンを押しても反応しない jQuery の click イベントを使ってボタンを押したら alert を表示する簡単な仕様なのになにも反応しない。一瞬はまってしまうことって・・・ありますよね?例えば、こう書きます。popup.

WP パーマリンク リダイレクト インターナルサーバーエラー

WP パーマリンク リダイレクト インターナルサーバーエラー WP パーマリンクのリダイレクトがインターナルサーバーエラーを起こすようになった。ユーザーさんのサイトなので「なにをしたか」わからない。WP パーマリンク リダイレクト インターナルサーバーエラーのい

Javascript から CGIを呼び出すのに便利な XMLHttpRequest 覚書

Javascript から CGIを呼び出すのに便利な XMLHttpRequest 覚書 XMLHttpRequestは、Javascript から サーバー上のCGIを呼び出す時に便利なコマンドだ。XMLHttpRequestをざっくり書いておく。CGIへコマンドを送る(JavaScri

Unchecked runtime.lastError: The message port closed before a response was received.の解決策

Unchecked runtime.lastError: The message port closed before a response was received.の解決策 Unchecked runtime.lastError: The message port closed before a response was received.未チェックのruntime.la

ロボフォームのようなパスワードを保存する拡張機能

ロボフォームのようなパスワードを保存する拡張機能 ロボフォームのようなパスワードを保存するJavaScritpを書こうと思った。ロボフォームは、wwwサイトのログイン情報などを保存できるブラウザの拡張機能だ。ところが、バージョンが上がるたび使い勝手が

flexbox インストールなど面倒なことなしにDIV BOX を横に並べるクラス

flexbox インストールなど面倒なことなしにDIV BOX を横に並べるクラス flexbox は、div の box を横に並べるためのブラウザに標準装備されてるクラス。乱暴な言い方すればそういうことです。現場では細かいことはどうでもよくて、とにかく簡単に DIV BOX を横