WordPressに慣れている方には言うまでもありませんが. アコーディオンやタブの高さを可変にするために. cssとhtmlのみでアコーディオンメニューです。 メニューに使えるリストタグで作るものと、長文のテキストなどを入れ込んでもカスタマイズが面倒でないものをピックアップ。 基本構造は、タグを利用しています。 input typeを「radio」にすればクリック時にアクティブになっていない … 今回は、こんな（↓）アコーディオンボタンを作ってみたので、ご紹介します。 コピペするだけ、簡単です。 クリックしてね ここに文字を入れるよ！ アコーディオン（折りたたみ）ボタン CSSテンプレート アコーディオンボタンのCSSコードを追加CSSにコピペできたら .

アコーディオンボタンを手軽に使う方法.

非常に便利です。わたしは全て登録しています。 iframe で読み込んだ子ページの高さが動的に変わる場合、読み込み元の html に固定サイズで height 属性を設定するのは望ましくありません。 サイズ設定が大きすぎると余白ができるし、小さすぎると縦スクロールバーが表示されます。ページ内の一部に縦スクロールバーが表示される … パネル全体の高さは可変、幅はレスポンシブ対応、各アイテムの中身は少なかったり多かったり、開閉はアニメーション、そんなアコーディオンをピュアcssで実装するテクニックを紹介します。 異なる高さにアニメー アコーディオンメニューのカスタマイズをしてみた。 【表示例】 アコーディオンメニュー表示例 の直前に記述する、 の useFixedPanelHeights:false, で、内容の容量で高さが調整され、 defaultPanel:1 で、2個目のタブが開いたままになる という指示を出している。
このときにはrightBoxの高さもheight: 400px; でいけまが、これをスマホなどのブラウザサイズが320px相当にした場合、leftBox内にあるimgの高さが変わるので（CSSでimgに100％として、比率固定で可変するようにしています。）rightBoxの高さは400pxで固定されているため高さにズレが生じてきます。
アコーディオンやタブの高さを可変にするためにどう書けばよいか悩みました。 height: 0 → height: auto ↑では動きません。 heightの代わりにmax-heightを使えば良いことがわかり、 勉強になりました。 まとめ [css]レスポンシブ対応、高さ可変のアコーディオンをピュアcssで実装するテクニックの解説記事。中身の要素（高さ）がバラバラでもいい感じにアコーディオンにしてくれるcssの書き方が解説されています。 HTMLコードをAddQuicktagのプラグインに登録しておくと.