徒然 夕焼け:跡地

思いついたことを徒然と(主に謀りの姫:Pocket プレイ体験)を元に色々書いています

MENU

アコーディオンパネル(開閉式コンテンツ)の覚書

内容が隠れててタップで表示されるやつ(開閉式コンテンツ)、アコーディオンって言うんだって。はてなブログでも実装できるのかな、ってやってみた。いつもどおり、トライ&エラーで小一時間以上かかったので覚書きを兼ねた自分用メモを。

 

テスト  サンプル

一応できた? これ ↓  文字入力を HTML ベースでやらないと高確率で HTML のコードが壊れるのでちょっと面倒。

タイトル

非表示になる内容1

非表示になる内容2

非表示になる内容3

  • 非表示になる内容 リスト
  • 非表示になる内容 リスト
  • 非表示になる内容 リスト

タイトル2

リストでない普通の文字(概要とか)入れておけば変な動きはない

  • 非表示になる内容 リスト
  • 非表示になる内容 リスト
  • 非表示になる内容 リスト

リストのみ場合 ・・なんか変な動きがある

  • 非表示になる内容 リスト
  • 非表示になる内容 リスト
  • 非表示になる内容 リスト

 

HTML コード

<div class="acodion-panel">
    <p class="acodion-title">コンテンツ タイトル</p>
    <div class="acodion-content">
        <p>非表示になる内容</p>
        <p>非表示になる内容</p>
        <p>非表示になる内容</p>
    </div>
</div>

 

覚書き(実装時のあれこれ)

参考サイト

jQuery のお勉強(他サイト含)は、突き進めるとプログラマー過ぎてしまい私には高度でわからず。さらっとした表面だけを。自分で作るとかじゃないしいいか、っていう。

はてなブログで実装するための、参考サイト様
  1. はてなブログ:アコーディオンパネル(閉開式コンテンツ)でテキストの表示・非表示を切り替える方法 - 渋谷で働く営業本部長のブログ
  2. 【はてなブログ】開閉式コンテンツ(アコーディオンパネル)でネタバレとかの表示・非表示を切り替える!

1のサイトさんは 2 のサイトさんを参考にしているみたい。1 のサイトさんの、特にこれ、

f:id:ninaxr:20220304154301p:plain

シンプルにやることが書いてあってよかった *( ᵕᴗᵕ )*.。

 

JQuery の参考サイト様
  1. jQueryファイルの読み込み方法(CDNや直接ダウンロード)
  2. 【最新版】jQueryのCDNを読み込む方法【超簡単です!】 - PENGIN BLOG

アコーディオンを実装するにあたって JQuery が必要なんだって。 JQuery ってなんだっけ、っていう・・・というか、先日あれこれやった カテゴリー階層表示&開閉表示 の時に出てこなかったっけ?( ,,`・ ω´・)?

jQuery について少しだけお勉強・・特に 1 のサイトさんの、jQueryのバージョンによる差異 とか、GoogleのCDN のメリット についての記述がわかりやすくてよかった。

例えば、GoogleCDNはいろいろなサイトでも利用されており、同じバージョンであれば前に訪問したサイトで既にキャッシュされた状態となっていることも多いでしょう。

jQuery以外にもFontAwesomeや、マイナーなCDNを使っている場合は、なるべくCDNを統一してあげるとより高速化が期待できます。( 1 のサイトさんから引用 )

なるほど、って感じ。

 

トライ&エラーのあれこれ

jQuery を二重に書いていたことが判明

jQuery のお勉強をしたことで、重複記述を発見。カテゴリー階層化の説明サイトさんでも ”既に書いてあったらいらない” ってなってたのに(消したか追加を見送った記憶はあるんだが)、ここに来てよーやくちゃんと意味が分かった気がした。

なぜだろう、ヘッダーとフッターにそれぞれ jQuery が書いてあったみたい。どっちかに書いてあればいいと思うので、フッターの方を消した

これ ↓  いろいろちょこちょこ弄ってるのでいつ書いたのかわからん;

◆ヘッダータイトル下
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

◆フッター
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://hatena.wackwack.net/v1.1/js/breadcrumb.min.js"></script>
<script src="https://hatena.wackwack.net/v1.1/js/category_archive.min.js"></script>

 

コードはどれを採用すればいいのか?

jQuery の記述は微妙に違って、どれがいいのかわからなくて困った。番号はバージョンだと思うが・・? jQueryファイルの読み込み方法(CDNや直接ダウンロード) のサイトさんを参考に、

バージョンは jQuery 2.x を、

GoogleCDN を使うことにした。 

GoogleCDN はキャッシュ効果で高速になるらしいのでそこに期待。

 

見栄えの CSS はいつもどおり・・・

次に見た目。自分のサイトに合うように CSS を追加。・・いつも通り、ちょっとだけ思う通りにならなかった;

タイトルと内容の間に帯が入ってしまって消せないし、幅の調整もできなかった;もう少し狭くしたかったんだけど・・どこでやるんだろう??

f:id:ninaxr:20220304163729p:plain

 

後日追記:消せました ♪

コードの解読で、タイトル下のマージン部分が出ていると判明。

なので、.acodion-title  の、margin-bottom: 20px; の数値を変更すれば OK。

内容との余白が狭く的になるなら、

.acodion-content に、padding-top: 10px;  くらいを追加すれば OK。

 

いちおうコードを。

/*-- アコーディオンここから ------*/
.entry-content .acodion-content p{
  margin: 0;
  padding: 10px;
}
.acodion-panel{
  box-sizing: border-box;
  background-color: #FFE8EB;
  border: 0px solid gray;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  margin-top: 30px;
  margin-bottom: 30px;
}
.acodion-title{
  background-color: #DEEDF2;
  border-bottom: 1px solid #cccccc;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  padding: 5px 15px 5px 15px;
  cursor: pointer;
  margin-bottom: 20px;    /*-- この部分のマージン20pxがピンクなエリアとして表示されてた ------*/
}
.acodion-content {
  display: none;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-top: 0px;
  padding-left: 10px;
  padding-right: 10px;
}
/*-- アコーディオン ここまで ------*/

 

内容をリスト表示にすると変な動きが入る

これも「?」だった。ちょっと気持ち悪いが治らない。普通の文字だと動かないので、リストではない普通の文字を入れることで暫定回避(´・ω・`)。

リストのみ場合 ・・なんか変な動きがある

  • 非表示になる内容 リスト
  • 非表示になる内容 リスト

 

さらに、テストサイトで暫定リンクを貼って確認したら、

アコーディオンのリストからリンク先へ飛ぶ」→「戻るボタンで戻る」→「アコーディオンのリストの文字が2段階的に小さくなる動きが出る*

これがものすごく気持ち悪い(´・ω・`)。原因不明。

* 最初に表示される文字がCSS指定のサイズよりも大きいのか、ちょんちょんちょん、と小さくなって指定サイズに収まる、みたいな?

・・・ここのブログのテンプレート、本当にちっちゃーい所を自分好みにカスタマイズしているので、どこかの CSS がバッティングしているんじゃないかという・・・CSS 読み込みにもタイムラグが出てるのかも。

ちょこちょこ直し過ぎて収集つかないレベル (ノд`ι)タハーー; まあ、致命的でなければ良しとする。一応、場合によっては(キャッシュによって?)この動きが出ないこともあるようなので。

 

 

近々、実際の記事でアコーディオン(開閉式パネル)使ってみようと思います。