Created
October 28, 2023 03:11
-
-
Save MFathurrohmanMauludin/ef081e3161b492d314011b7e4a2f3c42 to your computer and use it in GitHub Desktop.
Pure CSS Expand Collapse List
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<ul class="m-d expand-list"> | |
<li data-md-content="200"> | |
<label name="tab" for="tab1" tabindex="-1" class="tab_lab" role="tab">Product Description</label> | |
<input type="checkbox" checked class="tab" id="tab1" tabindex="0" /> | |
<span class="open-close-icon"> | |
<i class="fas fa-plus"></i> | |
<i class="fas fa-minus"></i> | |
</span> | |
<div class="content"> | |
Welcome to Brackets, a modern open-source code editor that understands web design. It's a lightweight, | |
yet powerful, code editor that blends visual tools into the editor so you get the right amount of help | |
when you want it. | |
</div> | |
</li> | |
<li data-md-content="300"> | |
<label name="tab" for="tab2" tabindex="-1" class="tab_lab" role="tab">Specifications</label> | |
<input type="checkbox" class="tab" id="tab2" tabindex="0" /> | |
<span class="open-close-icon"><i class="fas fa-plus"></i><i class="fas fa-minus"></i></span> | |
<div class="content"> | |
<em>Brackets is a different type of editor.</em> | |
Brackets has some unique features like Quick Edit, Live Preview and others that you may not find in other | |
editors. Brackets is written in JavaScript, HTML and CSS. That means that most of you using Brackets | |
have the skills necessary to modify and extend the editor. In fact, we use Brackets every day to build | |
Brackets. To learn more about how to use the key features, read on. | |
</div> | |
</li> | |
<li data-md-content="600"> | |
<label name="tab" for="tab3" tabindex="-1" class="tab_lab" role="tab">Shipping & Returns</label> | |
<input type="checkbox" class="tab" id="tab3" tabindex="0" /> | |
<span class="open-close-icon"><i class="fas fa-plus"></i><i class="fas fa-minus"></i></span> | |
<div class="content"> | |
<h3>Projects in Brackets</h3> | |
<p> | |
In order to edit your own code using Brackets, you can just open the folder containing your files. | |
Brackets treats the currently open folder as a "project"; features like Code Hints, Live Preview and | |
Quick Edit only use files within the currently open folder. | |
</p> | |
<samp> | |
Once you're ready to get out of this sample project and edit your own code, you can use the dropdown | |
in the left sidebar to switch folders. Right now, the dropdown says "Getting Started" - that's the | |
folder containing the file you're looking at right now. Click on the dropdown and choose "Open Folder…" | |
to open your own folder. | |
You can also use the dropdown later to switch back to folders you've opened previously, including this | |
sample project. | |
</samp> | |
</div> | |
</li> | |
</ul> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.m-d.expand-list{ | |
margin: 0; | |
padding: 0; | |
} | |
.m-d.expand-list > li{ | |
list-style-type: none; | |
padding: 15px 0; | |
border-bottom: 1px solid #212121; | |
position: relative; | |
/* max-width: 80%; */ | |
} | |
.m-d label[class^="tab"]:hover{ | |
cursor: pointer; | |
} | |
.m-d input{ | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
appearance: none; | |
} | |
.m-d input[class^="tab"]{ | |
width: 100%; | |
height: 40px; | |
position: absolute; | |
left: 0; | |
top: 0; | |
} | |
.m-d input[class^="tab"]:hover{ | |
cursor: pointer; | |
} | |
.m-d label[class^="tab"]{ | |
font-weight: bold; | |
} | |
.m-d .content{ | |
height: auto; | |
max-height: 0; | |
max-width: 300px; | |
/* background: yellow;*/ | |
overflow: hidden; | |
transform: translateY(20px); | |
transition: all 180ms ease-in-out 0ms; | |
} | |
.m-d li[data-md-content="100"] input[class^="tab"]:checked ~ .content{ | |
max-height: 100px; | |
transition: all 150ms ease-in-out 0ms; | |
} | |
.m-d li[data-md-content="200"] input[class^="tab"]:checked ~ .content{ | |
max-height: 200px; | |
transition: all 200ms ease-in-out 0ms; | |
} | |
.m-d li[data-md-content="300"] input[class^="tab"]:checked ~ .content{ | |
max-height: 300px; | |
transition: all 250ms ease-in-out 0ms; | |
} | |
.m-d li[data-md-content="400"] input[class^="tab"]:checked ~ .content{ | |
max-height: 400px; | |
transition: all 250ms ease-in-out 0ms; | |
} | |
.m-d li[data-md-content="500"] input[class^="tab"]:checked ~ .content{ | |
max-height: 500px; | |
transition: all 250ms ease-in-out 0ms; | |
} | |
.m-d li[data-md-content="600"] input[class^="tab"]:checked ~ .content{ | |
max-height: 600px; | |
transition: all 250ms ease-in-out 0ms; | |
} | |
.m-d li[data-md-content="700"] input[class^="tab"]:checked ~ .content{ | |
max-height: 700px; | |
transition: all 300ms ease-in-out 0ms; | |
} | |
.m-d li[data-md-content="800"] input[class^="tab"]:checked ~ .content{ | |
max-height: 800px; | |
transition: all 300ms ease-in-out 0ms; | |
} | |
.m-d li[data-md-content="900"] input[class^="tab"]:checked ~ .content{ | |
max-height: 900px; | |
transition: all 300ms ease-in-out 0ms; | |
} | |
.m-d li[data-md-content="1000"] input[class^="tab"]:checked ~ .content{ | |
max-height: 1000px; | |
transition: all 350ms ease-in-out 0ms; | |
} | |
.m-d li[data-md-content=""] input[class^="tab"]:checked ~ .content{ | |
max-height: 1000px; | |
transition: all 250ms ease-in-out 0ms; | |
} | |
.m-d input[class^="tab"]:checked ~ .content{ | |
margin-bottom: 20px; | |
} | |
.m-d .open-close-icon{ | |
display: inline-block; | |
position: absolute; | |
right: 20px; | |
transform: translatey(2px); | |
} | |
.m-d .open-close-icon i{ | |
position: absolute; | |
left: 0; | |
} | |
.m-d .open-close-icon .fa-minus{ | |
transform:rotate(-90deg); | |
transition: transform 150ms ease-in-out 0ms; | |
} | |
.m-d input[class^="tab"]:checked ~ .open-close-icon .fa-minus{ | |
transform: rotate(0deg); | |
transition: transform 150ms ease-in-out 0ms; | |
} | |
.m-d .open-close-icon .fa-plus{ | |
opacity: 1; | |
transform:rotate(-90deg); | |
transition: opacity 50ms linear 0ms, transform 150ms ease-in-out 0ms; | |
} | |
.m-d input[class^="tab"]:checked ~ .open-close-icon .fa-plus{ | |
opacity: 0; | |
transform: rotate(0deg); | |
transition: opacity 50ms linear 0ms, transform 150ms ease-in-out 0ms; | |
} | |
*{ | |
line-height: 1.4; | |
font-family: "harmonia sans", roboto, arial; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment