CSS + HTML only Accordion Element
Languages Used
This page was written in HTML and CSS. The CSS was compiled from SASS.
I used Normalize as my CSS reset and -prefix-free to save myself some headaches.
I haven’t quite gotten the hang of Slim for compiling into HTML, but someday I’ll use it since its syntax compliments that of SASS.
Regardless, this could all be done in plain HTML and CSS.
How it Works
Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element.
One use, as demonstrated here, is an entirely CSS and HTML accordion element. Media queries are used to make the element responsive to different screen sizes.
Points of Interest
By making the open state default for when :checked isn’t detected, we can make this system accessable for browsers that don’t recognize :checked.
The fallback is simply an open accordion. The accordion can be manipulated with Javascript (if needed) by changing the “checked” property of the input element.
FAQ（良くある質問）などで使えるアコーディオンブロックをCSSのみで実装
このページで使われているアコーディオンブロック（クリックorタップでタイトル下に文章が現れるスタイル）を使用する場合は、追加CSSに追記します。
このテーマは、「Header and Footer Script」というプラグインを導入しているので、任意のページのみに実装することが可能です。
エディタ下部の「Insert script to HEAD」に<style></style>で囲んだCSSを入力すれば、任意のページのヘッダーにスクリプトが反映されます。
この<input>とリストを使ったアコーディオンの欠点は、<p></p>の中にリストを入れれないことです。
HTML
<h1>CSS + HTML only Accordion Element</h1>
<ul class="accordion">
<li><input checked="checked" type="checkbox" /><i></i><br />
<h2>Languages Used</h2>
<p class="drawer">This page was written in HTML and CSS.
The CSS was compiled from SASS.
I used Normalize as my CSS reset and -prefix-free to save myself some headaches.
I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS.
Regardless, this could all be done in plain HTML and CSS.</p>
</li>
<li><input checked="checked" type="checkbox" /><i></i><br />
<h2>How it Works</h2>
<p class="drawer">Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. One use, as demonstrated here, is an entirely CSS and HTML accordion element. Media queries are used to make the element responsive to different screen sizes.</p>
</li>
<li><input checked="checked" type="checkbox" /><i></i><br />
<h2>Points of Interest</h2>
<p class="drawer">By making the open state default for when :checked isn't detected, we can make this system accessable for browsers that don't recognize :checked. The fallback is simply an open accordion. The accordion can be manipulated with Javascript (if needed) by changing the "checked" property of the input element.</p>
</li>
</ul>CSS
<style>
.transition,
ul.accordion .drawer,
ul.accordion li i:before,
ul.accordion li i:after {
transition: all 0.25s ease-in-out;
}
.flipIn,
h1,
ul.accordion li {
animation: flipdown 0.5s ease both;
}
.no-select,
ul.accordion h2 {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
h1, ul.accordion h2 {
color: #ff6873;
}
h1 {
text-transform: uppercase;
font-size: 36px;
line-height: 42px;
letter-spacing: 3px;
font-weight: 100;
}
ul.accordion h2 {
line-height: 34px;
font-weight: 300;
letter-spacing: 1px;
display: block;
margin: 0;
cursor: pointer;
padding: 0;
}
ul.accordion .drawer {
color: #fff;
line-height: 26px;
letter-spacing: 1px;
position: relative;
overflow: hidden;
max-height: 800px;
opacity: 1;
transform: translate(0, 0);
margin-top: 14px !important;
padding: 0;
z-index: 2;
}
ul.accordion {
list-style: none;
padding: 0 15px;
}
ul.accordion li {
position: relative;
padding: 0 !important;
margin: 0 !important;
}
ul.accordion li:nth-of-type(1) {
animation-delay: 0.5s;
}
ul.accordion li:nth-of-type(2) {
animation-delay: 0.75s;
}
ul.accordion li:nth-of-type(3) {
animation-delay: 1s;
}
ul.accordion li:last-of-type {
padding-bottom: 0;
}
ul.accordion li i {
position: absolute;
top: 34px;
right: 20px;
}
ul.accordion li i:before,
ul.accordion li i:after {
content: "";
position: absolute;
background-color: #ff6873;
width: 3px;
height: 9px;
}
ul.accordion li i:before {
transform: translate(-2px, 0) rotate(45deg);
}
ul.accordion li i:after {
transform: translate(2px, 0) rotate(-45deg);
}
ul.accordion li input[type=checkbox] {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
}
ul.accordion li input[type=checkbox]:checked ~ p {
margin-top: 0 !important;
max-height: 0;
opacity: 0;
transform: translate(0, 50%);
}
ul.accordion li input[type=checkbox]:checked ~ i:before {
transform: translate(2px, 0) rotate(45deg);
}
ul.accordion li input[type=checkbox]:checked ~ i:after {
transform: translate(-2px, 0) rotate(-45deg);
}
@keyframes flipdown {
0% {
opacity: 0;
transform-origin: top center;
transform: rotateX(-90deg);
}
5% {
opacity: 1;
}
80% {
transform: rotateX(8deg);
}
83% {
transform: rotateX(6deg);
}
92% {
transform: rotateX(-3deg);
}
100% {
transform-origin: top center;
transform: rotateX(0deg);
}
}
</style>
Atomic Bomb
Leave a Comment