Pyraminx
/
EaglerArchive
mirror of https://github.com/LeoTurlock/EaglerArchive.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Accordion Changes

This commit is contained in:
Leo Turlock 2024-04-27 17:26:54 +02:00
parent cd6bcf49e7
commit 22fa32fb0e
2 changed files with 31 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
archive.html
View File

@ -6,7 +6,7 @@
<title>EaglerArchive</title> <title>EaglerArchive</title>
<link rel="stylesheet" href="./stylesheet.css"> <link rel="stylesheet" href="./stylesheet.css">
<link rel="stylesheet" href="./nav_bar.css"> <link rel="stylesheet" href="./nav_bar.css">
<link rel="stylesheet" href="./archive_stylesheet"> <link rel="stylesheet" href="./archive_stylesheet.css">
</head> </head>
<body> <body>
@ -51,26 +51,35 @@
<h1>Archive</h1> <h1>Archive</h1>
<hr> <hr>
</div> </div>
<div class="accordion"> <div class="accordion">
<div class="accordion-item"> <div class="accordion-item">
<input type="radio" name="accordion" id="item1" checked> <input type="checkbox" name="accordion" id="item1" checked>
<label for="item1">Accordion Item 1</label> <label for="item1">
<div class="accordion-title">
<img src="./assets/icons/SF Symbols/arrowtriangle_right_circle_fill.png" alt="chevron_down">
<img src="./assets/images/ResentIcon.png" alt="">
<p>Resent</p>
</div>
</label>
<div class="accordion-content"> <div class="accordion-content">
<p>Content for item 1.</p> <p>Content for item 1.</p>
</div> </div>
</div> </div>
<div class="accordion-item"> <div class="accordion-item">
<input type="radio" name="accordion" id="item2"> <input type="checkbox" name="accordion" id="item2">
<label for="item2">Accordion Item 2</label> <label for="item2">Accordion Item 2</label>
<div class="accordion-content"> <div class="accordion-content">
<p>Content for item 2.</p> <p>Content for item 2.</p>
</div> </div>
</div> </div>
<div class="accordion-item"> <div class="accordion-item">
<input type="radio" name="accordion" id="item3"> <input type="checkbox" name="accordion" id="item3">
<label for="item3">Accordion Item 3</label> <label for="item3">Accordion Item 3</label>
<div class="accordion-content"> <div class="accordion-content">
<p>Content for item 3.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tortor vitae purus faucibus ornare suspendisse sed. Viverra accumsan in nisl nisi scelerisque eu. Eleifend quam adipiscing vitae proin sagittis nisl. Cursus risus at ultrices mi tempus imperdiet. Mattis nunc sed blandit libero volutpat sed cras ornare arcu. Donec massa sapien faucibus et molestie ac feugiat. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Ac tincidunt vitae semper quis lectus nulla at volutpat diam. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Vestibulum lectus mauris ultrices eros. Id porta nibh venenatis cras sed felis eget. Nec sagittis aliquam malesuada bibendum arcu vitae. Et ultrices neque ornare aenean euismod.
Viverra suspendisse potenti nullam ac. Ac orci phasellus egestas tellus rutrum tellus pellentesque. Tellus molestie nunc non blandit massa enim nec dui. Aliquam purus sit amet luctus venenatis lectus magna fringilla urna. Cursus vitae congue mauris rhoncus aenean. Feugiat in ante metus dictum at tempor commodo ullamcorper a. Nulla pharetra diam sit amet nisl. Tortor id aliquet lectus proin nibh nisl condimentum id venenatis. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Scelerisque varius morbi enim nunc faucibus a pellentesque sit amet.</p>
</div> </div>
</div> </div>
</div> </div>

20
archive_stylesheet.css
View File

@ -1,9 +1,11 @@
.accordion { .accordion {
width: 100%; width: 100%;
border-radius: 20px;
background-color: #333;
} }
.accordion-item { .accordion-item {
margin-bottom: 10px; margin: 10px;
} }
.accordion-item input { .accordion-item input {
@ -12,7 +14,6 @@
.accordion-item label { .accordion-item label {
display: block; display: block;
background-color: #f0f0f0;
padding: 10px; padding: 10px;
cursor: pointer; cursor: pointer;
} }
@ -20,11 +21,20 @@
.accordion-item .accordion-content { .accordion-item .accordion-content {
max-height: 0; max-height: 0;
overflow: hidden; overflow: hidden;
transition: max-height 0.2s ease-out; transition: max-height 0.2s ease;
background-color: #e0e0e0; background-color: #222;
padding: 0 10px; padding: 0 10px;
} }
.accordion-item input:checked ~ .accordion-content { .accordion-item input:checked ~ .accordion-content {
max-height: 100px; /* You can adjust this value depending on your content */ max-height: 100%; /* You can adjust this value depending on your content */
}
.accordion-item input:checked > .accordion-title img:first-child {
transform: rotate(90deg);
}
.accordion-title {
display: flex;
align-items: center;
} }