Commit a8098c46 authored by Maciej Wilgucki's avatar Maciej Wilgucki

accordion

parent 32da6801
@import "mixins";
@import "components/checkbox";
@import "components/radiobutton";
@import "components/accordion";
.accordion {
width: 300px;
input[type=radio] {
position: absolute;
top: -99999px;
opacity: 0;
& + label {
display: block;
background-color: #dbdbdb;
cursor: pointer;
padding: 5px;
}
&:checked {
& + label {
background: #333;
border: 1px solid #333;
color: #fff;
& + div {
display: block;
}
}
}
}
&__content {
display: none;
border: 1px solid #333;
padding: 5px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS checkbox example</title>
<link href="dist/css/app.css" rel="stylesheet">
</head>
<body>
<div class="accordion">
<input type="radio" name="accordion" id="accordion-a">
<label class="accordion__header" for="accordion-a">First header</label>
<div class="accordion__content">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque delectus dolorum facere itaque magni,
quasi ullam? Ab accusamus accusantium ad maiores nihil nulla quia? Accusantium hic in molestiae officia
praesentium?
</div>
<div>
Accusamus consectetur iste iusto minus porro repellendus vel veritatis. Accusantium aperiam, dolor dolore
ducimus ex expedita, laudantium maiores molestiae nobis numquam odit officiis perferendis quam recusandae,
reiciendis sed sint totam?
</div>
<div>
Adipisci aliquid dignissimos dolore doloremque ea exercitationem harum iusto labore laudantium maiores
necessitatibus non nostrum numquam odit officia porro, quasi rerum ullam! A ex odio, quod recusandae soluta
sunt ullam.
</div>
</div>
<input type="radio" name="accordion" id="accordion-b">
<label class="tabs__tab" for="accordion-b">Second header</label>
<div class="accordion__content">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda dignissimos eaque eos est ipsam
libero molestiae, molestias nam necessitatibus nisi numquam reiciendis rerum sunt, suscipit tempora totam
voluptas voluptatibus!
</div>
<div>
Culpa dicta exercitationem inventore repellat voluptates. Accusamus asperiores commodi consequuntur
cupiditate debitis earum excepturi explicabo fugiat laboriosam libero modi neque odit quae reiciendis,
repellendus sequi veritatis voluptatum! Delectus itaque, quas.
</div>
</div>
</div>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment