開閉ボタンCSS

2020.03.09
HP作成
HP, html, WP, 完全無料

開閉ボタンを作るCSSです。

/**********************
 *　開閉ボタン
**********************/
/*全体*/
.kaihei {
    margin: 2em 0;/*前後の余白*/
    padding: 0;
	}

/*ボタン装飾*/
.kaihei label {
    padding: 15px;
    font-weight: bold;
    border: solid 2px black;
    cursor :pointer;
	}

/*ボタンホバー時*/
.kaihei label:hover {
    background: #efefef;
}

/*チェックは見えなくする*/
.kaihei input {
    display: none;
}

/*中身を非表示にしておく*/
.kaihei .kaihei_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.kaihei input:checked ~ .kaihei_show {
    margin: -25px 0;
	  height: auto;
    opacity: 1;
	background-color:#FFEEFF;
}

/**********************

*　開閉ボタン

**********************/

/*全体*/

.kaihei {

margin: 2em 0;/*前後の余白*/

padding: 0;

}

/*ボタン装飾*/

.kaihei label {

padding: 15px;

font-weight: bold;

border: solid 2px black;

cursor :pointer;

}

/*ボタンホバー時*/

.kaihei label:hover {

background: #efefef;

}

/*チェックは見えなくする*/

.kaihei input {

display: none;

}

/*中身を非表示にしておく*/

.kaihei .kaihei_show {

height: 0;

padding: 0;

overflow: hidden;

opacity: 0;

transition: 0.8s;

}

/*クリックで中身表示*/

.kaihei input:checked ~ .kaihei_show {

margin: -25px 0;

height: auto;

opacity: 1;

background-color:#FFEEFF;

}

患者様の動画やアンケートがあった際にはこちらのhtmlを使います。
基本的に動画や画像で見せている内容なので見なくても良いものなので隠しておきます。
なぜ、記載しておくかというと患者さんの見やすい状態をつくっておくことと、文章にすることでSEO対策になります。

<div class="kaihei"><label for="label1">患者様アンケートを表示</label>
<input id="label1" type="checkbox" />
<div class="kaihei_show">

<!--非表示ここから-->
<h3>来院される前について</h3>
+nicoに来院される前の事についてお聞かせ下さい
<h4>どんな感じで頭痛が辛かった・悩んでいましたか？</h4>
もともと頭痛もちでしたが+nicoに来る直前はほぼ毎日のように頭が重かったり頭痛がありました。めまいや首肩のこりもありました。
<h4>どんな感じで頭痛が出ていましたか？</h4>
ほぼ毎日ありました。頭が重かったり目の奥から痛みがあるような感じでした。
<h4>生活にはどう影響していましたか？</h4>
ご飯も食べられなくなるくらい頭が痛いこともあり痛み止めが手放せなかったです
<h3>来院されてからの変化</h3>
+nicoに来院され今はどう変わりましたか？
<h4>ここに来て頭痛はどう変わりましたか？</h4>
回数が減りました。毎日あったのがない週も！
<h4>生活はどう変わりましたか？</h4>
痛み止めを飲む回数が減り気持ちが楽になりました！
<h3>治療をお悩みの方に一言お願いします</h3>
私の場合は首肩こりも感じてたので、もしかしたら整体で改善できないかなぁと思い+nicoに辿りつきました。体の状態をみてもらいながら相談もできるのでオススメです！

<!--ここまで-->

</div>
</div>

患者様アンケートを表示

来院される前について

+nicoに来院される前の事についてお聞かせ下さい

どんな感じで頭痛が辛かった・悩んでいましたか？

もともと頭痛もちでしたが+nicoに来る直前はほぼ毎日のように頭が重かったり頭痛がありました。めまいや首肩のこりもありました。

どんな感じで頭痛が出ていましたか？

ほぼ毎日ありました。頭が重かったり目の奥から痛みがあるような感じでした。

生活にはどう影響していましたか？

ご飯も食べられなくなるくらい頭が痛いこともあり痛み止めが手放せなかったです

来院されてからの変化

+nicoに来院され今はどう変わりましたか？

ここに来て頭痛はどう変わりましたか？

回数が減りました。毎日あったのがない週も！

生活はどう変わりましたか？

痛み止めを飲む回数が減り気持ちが楽になりました！

治療をお悩みの方に一言お願いします

私の場合は首肩こりも感じてたので、もしかしたら整体で改善できないかなぁと思い+nicoに辿りつきました。体の状態をみてもらいながら相談もできるのでオススメです！

会員登録はこちらから！

公式LINEに登録して「会員登録」とコメント頂くと、治療院・サロンの開業ノウハウの無料ページを閲覧することが可能です。

前の記事

ブレッドCSS 2020.03.09
次の記事

質問事項　css html 2020.03.15