Skip to content

Instantly share code, notes, and snippets.

@jigneshk5

jigneshk5/accordions-input-checkboxes.markdown

Created August 22, 2021 21:54
Show Gist options
  • Save jigneshk5/c68559015b743d8c19e2b921ead0fe77 to your computer and use it in GitHub Desktop.
Save jigneshk5/c68559015b743d8c19e2b921ead0fe77 to your computer and use it in GitHub Desktop.
Download ZIP
Accordions - Input Checkboxes
Raw
index.html
<div class="accordion-boxes">
<div class="accordion">
<input type="checkbox" name="accordion" id="accordion1" class="hide radio-checkbox" checked />
<div class="top-accordion">
<p class="title-accordion">Bender, you risked your life to save me!</p>
<label for="accordion1" class="icon-accordion">
<svg class="icon expand" id="plus-accordion" width="20" height="20" title="expand">
<use xlink:href="#plus" />
</svg>
<svg class="icon close" id="close-accordion" width="18" height="18" title="expand">
<use xlink:href="#close" />
</svg>
</label>
</div>
<div class="content-accordion">
<div class="box-content">
<div class="icon-box">
<svg id="yellow" width="18" height="18" title="expand">
<use xlink:href="#lightning" />
</svg>
</div>
<div class="box-info">
<h3 class="yellow">Performance</h3>
<p>Performance plays a major role in the success of any online venture. High-performing sites engage and retain users better than low-performing ones..</p>
</div>
</div>
<div class="box-content">
<div class="icon-box blue">
<svg id="close-accordion" width="18" height="18" title="expand">
<use xlink:href="#terminal" />
</svg>
</div>
<div class="box-info">
<h3 class="blue">Terminal</h3>
<p>Using a terminal allows us to send simple text commands to our computer to do things like navigate through a directory or copy a file, and form the basis for many more complex automations and programming skills.</p>
</div>
</div>
<div class="box-content">
<div class="icon-box red">
<svg id="close-accordion" width="18" height="18" title="expand">
<use xlink:href="#finger-print" />
</svg>
</div>
<div class="box-info">
<h3 class="red">Finger Print</h3>
<p>A fingerprint scanner or fingerprint reader is a hardware device that verifies a user or enters password information by scanning their finger.</p>
</div>
</div>
</div>
</div>
<div class="accordion">
<input type="checkbox" name="accordion" id="accordion2" class="hide radio-checkbox" />
<div class="top-accordion">
<p class="title-accordion">And from now on you're all named Bender Jr.</p>
<label for="accordion2" class="icon-accordion">
<svg class="icon expand" id="plus-accordion" width="20" height="20" title="expand">
<use xlink:href="#plus" />
</svg>
<svg class="icon close" id="close-accordion" width="18" height="18" title="expand">
<use xlink:href="#close" />
</svg>
</label>
</div>
<div class="content-accordion">
<div class="box-content">
<div class="icon-box">
<svg id="close-accordion" width="18" height="18" title="expand">
<use xlink:href="#beaker" />
</svg>
</div>
</div>
</div>
</div>
<div class="accordion">
<input type="checkbox" name="accordion" id="accordion3" class="hide radio-checkbox" />
<div class="top-accordion">
<p class="title-accordion">Whoa, slow down there, maestro. There's a *New* Mexico?</p>
<label for="accordion3" class="icon-accordion">
<svg class="icon expand" id="plus-accordion" width="20" height="20" title="expand">
<use xlink:href="#plus" />
</svg>
<svg class="icon close" id="close-accordion" width="18" height="18" title="expand">
<use xlink:href="#close" />
</svg>
</label>
</div>
<div class="content-accordion">
<div class="box-content">
<div class="icon-box">
<svg id="close-accordion" width="18" height="18" title="expand">
<use xlink:href="#beaker" />
</svg>
</div>
</div>
</div>
</div>
</div>
<svg class="hide">
<symbol viewBox="0 0 20 20" fill="currentColor" id="plus"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></symbol>
<symbol id="close"viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z" clip-rule="evenodd"></path></symbol>
<symbol fill="none" viewBox="0 0 24 24" stroke="currentColor" id="beaker"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></symbol>
<symbol id="lightning" fill="currentColor" stroke="currentColor" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><path d="m6.5 7.5h4l-6 9v-6.997l-4-.003 6-9z" stroke-linecap="round" stroke-linejoin="round" transform="translate(5 2)"/></symbol>
<symbol viewBox="0 0 20 20" fill="currentColor" id="finger-print"><path fill-rule="evenodd" d="M6.625 2.655A9 9 0 0119 11a1 1 0 11-2 0 7 7 0 00-9.625-6.492 1 1 0 11-.75-1.853zM4.662 4.959A1 1 0 014.75 6.37 6.97 6.97 0 003 11a1 1 0 11-2 0 8.97 8.97 0 012.25-5.953 1 1 0 011.412-.088z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M5 11a5 5 0 1110 0 1 1 0 11-2 0 3 3 0 10-6 0c0 1.677-.345 3.276-.968 4.729a1 1 0 11-1.838-.789A9.964 9.964 0 005 11zm8.921 2.012a1 1 0 01.831 1.145 19.86 19.86 0 01-.545 2.436 1 1 0 11-1.92-.558c.207-.713.371-1.445.49-2.192a1 1 0 011.144-.83z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M10 10a1 1 0 011 1c0 2.236-.46 4.368-1.29 6.304a1 1 0 01-1.838-.789A13.952 13.952 0 009 11a1 1 0 011-1z" clip-rule="evenodd"></path></symbol>
<symbol viewBox="0 0 20 20" fill="currentColor" id="terminal"><path fill-rule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"></path></symbol>
</svg>
Raw
style.scss
//Font import
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@523&display=swap");
:root {
--bg-page: #181818;
--text-color: #f9f9f9;
--bg-accordion: linear-gradient(30deg, #272727, #2b2b2b);
--blue: #0870f8;
--g-yellow: linear-gradient(30deg, #fc0, #fc0);
--g-red: linear-gradient(30deg, #f36, #f24);
--g-blue: linear-gradient(30deg, #0cf, #0af);
--blue-rgb: 8, 112, 248;
}
* {
box-sizing: border-box;
font-family: "Manrope", sans-serif;
font-size: 16px;
font-weight: 400;
}
.center {
display: flex;
align-items: center;
justify-content: center;
}
body {
&,
html {
margin: 0;
padding: 0;
height: 100%;
}
overflow-y: scroll;
background: var(--bg-page);
color: var(--text-color);
}
h1,
h2,
h3,
h4,
h5,
h6,
span,
p,
label,
a {
margin: 0;
}
.hide {
display: none;
visibility: hidden;
height: 0;
opacity: 0;
}
svg {
line-height: 0;
}
.accordion-boxes {
max-width: 800px;
margin: 60px auto;
}
.accordion {
padding: 10px 20px;
background: var(--bg-accordion);
border-radius: 8px;
& + .accordion {
margin-top: 14px;
}
* {
user-select: none;
}
}
.top-accordion {
display: flex;
align-items: center;
justify-content: space-between;
.title-accordion {
font-weight: 600;
}
.icon-accordion {
width: 24px;
height: 24px;
@extend .center;
background: #5f676f;
border-radius: 4px;
transition: all 200ms ease;
cursor: pointer;
@media (hover: hover) {
&:hover {
background: var(--blue);
}
}
&:active {
background: var(--blue);
}
}
}
.icon.close {
display: none;
height: 0;
opacity: 0;
visibility: hidden;
}
.content-accordion {
margin-top: 16px;
font-size: 0.9rem;
padding: 20px 30px;
height: 0;
visibility: hidden;
opacity: 0;
display: none;
transition: all 200ms ease;
animation: fadeInFromNone 0.5s ease-out;
}
.box-content {
display: flex;
& + .box-content {
margin-top: 20px;
}
.box-info {
margin-left: 10px;
flex: 1;
h3 {
font-size: 22px;
line-height: 145%;
font-variation-settings: "wght" 700;
font-weight: 600;
color: inherit;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
&.red {
background: var(--g-red);
}
&.blue {
background: var(--g-blue);
}
&.yellow {
background: var(--g-yellow);
}
}
p {
font-size: 13px;
margin-top: 10px;
font-variation-settings: "wght" 400;
}
}
.icon-box {
@extend .center;
width: 30px;
height: 30px;
border-radius: 6px;
background: linear-gradient(30deg, #fc0, #fc0);
color: #181818;
cursor: pointer;
&.yellow {
background: var(--g-yellow);
}
&.red {
background: var(--g-red);
}
&.blue {
color: #f9f9f9;
background: var(--g-blue);
}
* {
transition: all 150ms ease;
}
&:hover {
svg {
transform: scale(1.3);
}
}
}
}
input[type="checkbox"]:checked {
& ~ .top-accordion .icon-accordion {
background: var(--blue);
.icon.expand {
display: none;
}
.icon.close {
display: block;
height: auto;
opacity: 1;
visibility: visible;
}
}
& ~ .content-accordion {
display: block;
opacity: 1;
height: auto;
visibility: visible;
}
}
@keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment