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>回答１</li>
</ul>
</li>

<li><p><a class="que" data-target="que2">メニュー2</a></p>
<ul id="que2">
<li>回答２</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>質問１</summary>
    回答１
</details>
<details>
    <summary>質問２</summary>
    回答２
</details>

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

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

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

質問１ 回答１
質問２ 回答２

スポンサーリンク

関連記事

トップページに戻る

スポンサーリンク

よく使うタグ

・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:ユーザー入力補助

カテゴリー

MW WP FORM のフックが効かない。

MW WP FORM のフックが効かない。 MW WP FORM のフックが効かない。MW WP FORM は、各種フックがあってカスタマイズが便利～とか言われているプラグインですが。。。マニュアルにはあるのにフックが効かないフックがかなりある
詳しくは・・・

MW WP FORM のショートコードで出力される内容をカスタマイズする。

MW WP FORM のショートコードで出力される内容をカスタマイズする。 MW WP FORM のショートコードで出力される内容をカスタマイズしたくなりました。非表示フィールド type=”hidden” にデータをためておいて、それをメール送信する
詳しくは・・・

WelCart 買い物かごのカスタマイズ、テンプレートファイルの場所

WelCart 買い物かごのカスタマイズ、テンプレートファイルの場所 WelCart 買い物かごのカスタマイズするとき、毎回テンプレートファイルを探すのでメモしておきます。WelCart 買い物かごのカスタマイズ、テンプレートファイルの場所WelCart 買い物かごのカ
詳しくは・・・

WelCart で投稿ページに商品購入欄を作る

WelCart で投稿ページに商品購入欄を作る WelCart の商品ページは、ご存知んごとくウルトラダサい。これをカスタマイズしないとなんとも素人っぽさの抜けないサイトになってしまう。WelCart で投稿ページに商品購入欄を作るときのモジュール
詳しくは・・・

FB 広告 最適化～グーグルアナリティクスとサーチコンソールの連動のさせかた(必要な分だけ）

FB 広告 最適化～グーグルアナリティクスとサーチコンソールの連動のさせかた(必要な分だけ） FB 広告 最適化にあたって必要になってくるツールがグーグルアナリティクスとサーチコンソール。別にグーグルのアナリティクス、サーチコンソールでなくてもアクセス解析はできるんだけど、グーグルはユーザー囲
詳しくは・・・

FB 広告 最適化～グーグルアナリティクスの使い方(必要な分だけ）

FB 広告 最適化～グーグルアナリティクスの使い方(必要な分だけ） FB 広告 最適化にあたって必要になってくるツールがグーグルアナリティクス。別にグーグルのアナリティクスでなくてもアクセス解析はできるんだけど、グーグルはユーザー囲い込みの為他のアクセス解析では見せな
詳しくは・・・