アコーディオンメニューのメニューを初期で表示してる状態にしたい

Question

前提・実現したいこと

アコーディオンメニューのメニューを最初から開いた状態で表示したいのですが、どのように書いたらいいかわからずにいます
該当のソースコードのmenu01を最初から表示した状態に、その他は非表示の状態にしたいです
詳しい方教えていただけないでしょうか？

該当のソースコード

<div class="cp_menu">
<label for="cp_menu_bar1">menu01</label>
<input type="radio" name="radio" id="cp_menu_bar1" class="accordion" />
<ul id="link1">
	<li><a href="">link01</a></li>
	<li><a href="">link02</a></li>
	<li><a href="">link03</a></li>
	<li><a href="">link04</a></li>
</ul>
<label for="cp_menu_bar2">menu02</label>
<input type="radio" name="radio" id="cp_menu_bar2" class="accordion" />
<ul id="link2">
	<li><a href="">link01</a></li>
	<li><a href="">link02</a></li>
	<li><a href="">link03</a></li>
	<li><a href="">link04</a></li>
</ul>
</div>

.cp_menu {
	max-width: 360px;
	margin: 0 auto;
	padding: 0;
}
.cp_menu a {
	display: block;
	padding: 10px;
	text-decoration: none;
	color: #000000;
	line-height: 1;
}
.cp_menu label {
	display: block;
	position: relative;
	margin: 0 0 2px 0;
	padding: 12px;
	line-height: 1;
	color: #ffffff;
	background: #1b2538;
	cursor: pointer;
}
.cp_menu label::before {
	position: absolute;
	content: '▼';
	color: #ffffff;
	right: 0.5em;
	top: 25%;
}
.cp_menu input {
	display: none;
}
.cp_menu ul {
	margin: 0;
	padding: 0;
	background: #f4f4f4;
	list-style: none;
}
.cp_menu li {
	overflow-y: hidden;
	max-height: 0;
	transition: all 0.5s;
}
#cp_menu_bar1:checked ~ #link1 li,
#cp_menu_bar2:checked ~ #link2 li {
	max-height: 46px;
	opacity: 1;
}

Answer 1

id=cp_menu_bar1のラジオボタンにcheckedをつけてください

Comments

[退会済みユーザー]

checkedを入れたら無事できました
もう一ついいでしょうか？

<ul id="link1">
<li><a href="">link01</a></li>
<li><a href="">link02</a></li>
<li><a href="">link03</a></li>
<li><a href="">link04</a></li>
</ul>

このulの部分のheightに、固定の高さを設定するにはどうしたらいいのでしょうか？
今ままですと、高さはlink01～link04で調節されてしまうのですが、
固定にしたい場合どうしたらいいのでしょうか？

[yambejp]

＞固定の高さ

具体的にどういう高さなのでしょうか？
それよりによりliはどうするのですか？
・均等に割り振る
・溢れたら隠れ、足りなかったら余白

[退会済みユーザー]

こんな感じで考えてたんですが、指定した高さに変わりません・・・考え方が間違ってるのでしょうか

<style>
body,html{
width:100%;
height:100%;
}
</style>

<ul id="link1" style="width:100%;height:300px">
<div style="width:100%;height:100%;overflow-y:scroll;overflow-x:scroll;-webkit-overflow-scrolling:touch">
<li><a href="">link01</a></li>
<li><a href="">link02</a></li>
<li><a href="">link03</a></li>
<li><a href="">link04</a></li>
</div>
</ul>

[yambejp]

ulの直下にdivはおけません

[退会済みユーザー]

再チャレンジさせてください。
ulを使わずdivを使ったものです
<div class="cp_actab-content" style="width:100%;height:50%">
<div class="cp_actab-content" style="width:100%;height:70%">
<div class="cp_actab-content" style="width:100%;height:90%">
とそれぞれ高さを指定しましたが、全て同じとなってしまうのですが、なぜでしょうか？

<div class="cp_actab">
<input id="tab-four" type="radio" name="tabs2">
<label for="tab-four">タイトル</label>
<div class="cp_actab-content" style="width:100%;height:50%">
<div style="width:100%;height:100%">本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文</div>
</div>
</div>
<div class="cp_actab">
<input id="tab-five" type="radio" name="tabs2">
<label for="tab-five">タイトル</label>
<div class="cp_actab-content" style="width:100%;height:70%">
<div style="width:100%;height:100%">本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文</div>
</div>
</div>
<div class="cp_actab">
<input id="tab-six" type="radio" name="tabs2">
<label for="tab-six">タイトル</label>
<div class="cp_actab-content" style="width:100%;height:90%">
<div style="width:100%;height:100%">本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文</div>
</div>
</div>

<style>
.body,html {
width:100%;
height:100%;
}
.cp_actab {
position: relative;
overflow: hidden;
width: 100%;
margin-bottom: 1px;
color: #ffffff;
}
.cp_actab input {
position: absolute;
z-index: -1;
opacity: 0;
}
.cp_actab label {
font-weight: bold;
line-height: 3;
position: relative;
display: block;
padding: 0 0 0 1em;
margin: 0 0 1px 0;
cursor: pointer;
background: #1b2538;
}
.cp_actab .cp_actab-content {
overflow-y:scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
max-height: 0;
-webkit-transition: max-height 0.35s;
transition: max-height 0.35s;
background: #a9bce2;
}
.cp_actab .cp_actab-content p {
margin: 1em;
}
/* :checked */
.cp_actab input:checked ~ .cp_actab-content {
max-height: 20em;
}
/* Icon */
.cp_actab label::after {
line-height: 3;
position: absolute;
top: 0;
right: 0;
display: block;
width: 3em;
height: 3em;
-webkit-transition: all 0.35s;
transition: all 0.35s;
text-align: center;
}
.cp_actab input[type=radio] + label::after {
content: 'BC';
}
.cp_actab input[type=radio]:checked + label::after {
transform: rotateX(180deg);
}
</style>

[退会済みユーザー]

この部分をどのように書き換えれば、それぞれの高さを%で別々に指定できるのでしょうか？

.cp_actab input:checked ~ .cp_actab-content {
max-height: 20em;
}

Answer 2

やはり高さが変わらずにいます
どこがいけないのかわからずにいます
どなたか教えていただけないでしょうか？

<style> body,html { width:100%; height:100%; } .cp_actab1 ,.cp_actab2 ,.cp_actab3 { position: relative; overflow: hidden; width: 100%; margin-bottom: 1px; color: #ffffff; } .cp_actab1 input,.cp_actab2 input,.cp_actab3 input { position: absolute; z-index: -1; opacity: 0; } .cp_actab1 label,.cp_actab2 label,.cp_actab3 label { font-weight: bold; line-height: 3; position: relative; display: block; padding: 0 0 0 1em; margin: 0 0 1px 0; cursor: pointer; background: #1b2538; } .cp_actab1 .cp_actab-content1,.cp_actab2 .cp_actab-content2,.cp_actab3 .cp_actab-content3 { overflow: hidden; max-height: 0; -webkit-transition: max-height 0.35s; transition: max-height 0.35s; background: #a9bce2; } /* :checked */ .cp_actab1 input:checked ~ .cp_actab-content1{ overflow-y:scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; width:100%; max-height:100%; } .cp_actab1 input:checked ~ .cp_actab1 { overflow-y:scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; width:100%; max-height:20%; } .cp_actab2 input:checked ~ .cp_actab-content2{ overflow-y:scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; width:100%; height:100%; max-height:100%; } .cp_actab2 input:checked ~ .cp_actab2 { overflow-y:scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; width:100%; max-height:60%; } .cp_actab3 input:checked ~ .cp_actab-content3 { overflow-y:scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; width:100%; height:100%; max-height:100%; } .cp_actab3 input:checked ~ .cp_actab3 { overflow-y:scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; width:100%; max-height:80%; } /* Icon */ .cp_actab1 label::after,.cp_actab2 label::after,.cp_actab3 label::after { line-height: 3; position: absolute; top: 0; right: 0; display: block; width: 3em; height: 3em; -webkit-transition: all 0.35s; transition: all 0.35s; text-align: center; } .cp_actab1 input[type=radio] + label::after,.cp_actab2 input[type=radio] + label::after,.cp_actab3 input[type=radio] + label::after { content: '▼'; } .cp_actab1 input[type=radio]:checked + label::after,.cp_actab2 input[type=radio]:checked + label::after,.cp_actab3 input[type=radio]:checked + label::after { transform: rotateX(180deg); } </style> <div style="width:100%;height:100%;overflow-y:scroll;overflow-x: hidden;-webkit-overflow-scrolling: touch;"> <div class="cp_actab1"> <input id="tab-four" type="radio" name="tabs2"> <label for="tab-four">タイトル</label> <div class="cp_actab-content1"> <div style="height:100%;background-color:red">ここは高さ20%で固定したい</div> </div> </div> <div class="cp_actab2"> <input id="tab-five" type="radio" name="tabs2"> <label for="tab-five">タイトル</label> <div class="cp_actab-content2"> <div style="height:100%;background-color:green">ここは高さ60%で固定したい</div> </div> </div> <div class="cp_actab3"> <input id="tab-six" type="radio" name="tabs2"> <label for="tab-six">タイトル</label> <div class="cp_actab-content3"> <div style="height:100%;background-color:blue">ここは高さ80%で固定したい</div> </div> </div> </div>

Comments

[退会済みユーザー]

CSSでは実現が難しいように思います
jQueryを使えばできそうな気がします