Panel Openをcssのみで実行する例

css関連
2023年2月13日

以前は自サイトのaboutページでリーガル関係の文言の表示に使っていたもの。
Read(label)部分をクリックでパネルがオープンする。これをjavascriptを使わずにcssのみで実行する方法。


cssは以下。

/*================================
     panel open
================================*/
input
{
display: none;
}
label
{
width: 100px;
cursor: pointer;
display: inline-block;
font-family: poiret-one, sans-serif;
font-size: 120%;
letter-spacing: 0.1em;
text-align: center;
padding: 4px 5px;
border-radius: 4px;
background: #6F6F6F;
color: #FFF;
-webkit-transition: 0.1s;
transition: 0.1s;
}
label:hover
{
background: #c11111;
}
	.panel
	{
  -webkit-transition: .3s ease;
  transition: .3s ease;
	font-size: 80%;
	text-align: left;
  height: 0;
	width: 70%;
  overflow: hidden;
  background: #FFFFFF;
  margin: 10px auto;
  padding: 0;
  border-radius: 5px;
	border: 1px solid #ccc;
	opacity: 0;
	}
input:checked + .panel
{
height: auto;
padding: 35px;
opacity: 1;
}
PAGE TOP