<input type="checkbox">
まず、checkboxのボタンを用意する。
まず、inputの下に開閉したい要素を置く。
<input type="checkbox">
<div>ここに内容</div>
divの中を見えないようにする。
div{
height: 0;
overflow-y:hidden;
}
inputにチェックが入ったら隠した要素を表示する。
input:checked ~ div { height: auto; }
inputにid、labelにforを付けて関連付ける。
<label for="check1">文字部分を押してもチェックが入る</label>
<input type="checkbox" id="check1">
<div>ここに内容</div>
input {display: none;}
チェックボックスを非表示にする。
<div class="open">
<label for="box1">ここを押すと開く</label>
<input type="checkbox" id="box1">
<div>ここに内容</div>
</div>
/* チェックボックスを消す */
.open input {
display: none;
}
/* divを非表示にする */
.open div{
height: 0;
overflow-y:hidden;
}
/* チェックが入るとdivを表示させる */
.open input:checked ~ div {
height: auto;
}
<input type="checkbox" checked>
input【checked】を追加する。
label {cursor: pointer;}
label:hover {color: 色指定;}
div {transition: all 開閉速度s;}
これだとアニメーションが付かないので、高さを指定する必要がある。
閉じてる時は【高さ 0】で非表示。
div {height: 0; }
開いたら【高さ指定】で表示
input:checked ~ div {height: 高さpx; }
閉じた時は上下の空白を0にして消す
div {padding: 0 左右の空白px;}
開いた時は上下に空白を入れる
input:checked ~ div {padding: 上下の空白px 左右の空白px;}
ここに内容。
さんぷる。
さんぷる。
開閉を滑らかにしてみた。
max-height: 0;
とmax-height: 300px;
を指定。
上に比べるとゆっくり開閉する感じ。
<div class="open">
<label for="box1">ここを押すと開く</label>
<input type="checkbox" id="box1">
<div>ここに内容</div>
</div>
.open label {
border: solid 1px #000;
cursor: pointer;
}
.open input {
display: none;
}
.open input:checked ~ div {
height: auto; /* 滑らかに開閉する場合はmax-height: 高さpx;に変更 */
padding: 6px;
}
.open div {
background: #eee;
height: 0; /* 滑らかに開閉する場合はmax-height: 0;に変更 */
list-style: none;
overflow-y: hidden;
padding: 0 6px;
transition: all 0.8s;
}
<div class="menu">
<label for="link1">タイトル1</label>
<input type="checkbox" id="link1">
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
<label for="link2">タイトル2</label>
<input type="checkbox" id="link2">
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</div>
.menu {
width: 300px;
}
.menu label {
background: #000;
color: #fff;
cursor: pointer;
display: block;
padding: 8px;
}
.menu input {
display: none;
}
.menu ul{
margin: 0 0 1px;
padding: 0;
}
.menu input:checked + ul li {
height: auto;
padding: 8px 12px;
}
.menu li {
height: 0;
list-style: none;
overflow-y: hidden;
padding: 0 12px;
transition: 0.4s;
}
<div class="menu">
<div>
<input type="checkbox" id="link1">
<label for="link1" class="switch">タイトル1</label>
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</div>
<div>
<input type="checkbox" id="link2">
<label for="link2">タイトル2</label>
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</div>
</div>
.menu {
width: 300px;
}
.menu label {
background: #000;
color: #fff;
cursor: pointer;
display: block;
padding: 10px;
position: relative;
}
.menu label::after {
content: "▼";
position: absolute;
right: 14px;
transition: 0.3s;
}
.menu input:checked + label::after {
transform: rotateX(180deg);
}
.menu input {
display: none;
}
.menu ul{
margin: 0 0 8px;
padding: 0;
}
.menu input:checked ~ ul {
border-bottom: solid 4px #000;
}
.menu input:checked ~ ul li {
max-height: 50px;
}
.menu input:checked ~ ul li:not(:last-child) {
border-bottom: dotted 1px #000;
}
.menu li {
background: #eee;
list-style: none;
max-height: 0;
overflow-y: hidden;
transition: 0.5s;
}
.menu a{
color: #000;
display: block;
font-size: 0.9em;
padding: 10px 12px;
text-decoration: none;
}
.menu a:hover{
background: #ccc;
transition: 0.2s;
}