Vanilla CSS Accordion and Responsive Tables
How do I make an vanilla css accordion and responsive tables?
Accordion data tables on vanilla CSS. "Price" table is responsive table. It is a part of the last project.. What is a vanilla css accordion and responsive tables? How do you make a vanilla css accordion and responsive tables? This script and codes were developed by Maxim Konoval on 27 January 2023, Friday.
Vanilla CSS Accordion and Responsive Tables Previews
Vanilla CSS Accordion and Responsive Tables - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vanilla CSS Accordion and Responsive Tables</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- All Data are Random and Fake -->
<main class="data-page"> <section class="booking-table"> <h2>Departure segments</h2> <div class="table-segment"> <input type="checkbox" id="segment-1" name="segment-checker" value=""> <label for="segment-1" class="table-segment_title"> Madrid Puerta de Atocha — Barcelona Sants </label> <div class="table_wrapper"> <table> <tr> <th>Train / Bus / Flight</th> <td>LO0756 (LOT - Polish Airlines)</td> </tr> <tr> <th>Departure</th> <td>06:00, 25.08.2017</td> </tr> <tr> <th>Arrival</th> <td>06:30, 25.08.2017</td> </tr> <tr> <th>Tariff</th> <td>Economy</td> </tr> <tr> <th>Carriers reference number</th> <td>KCTOHD</td> </tr> <tr> <th>Ticket type</th> <td>ETK</td> </tr> </table> </div> </div> <div class="table-segment"> <input type="checkbox" id="segment-2" name="segment-checker" value=""> <label for="segment-2" class="table-segment_title"> Los Angeles, United States of America — San Diego, United States of America </label> <div class="table_wrapper"> <table> <tr> <th>Train / Bus / Flight</th> <td>LO0023 (LOT - Polish Airlines)</td> </tr> <tr> <th>Departure</th> <td>16:30, 25.08.2017</td> </tr> <tr> <th>Arrival</th> <td>19:50, 25.08.2017</td> </tr> <tr> <th>Tariff</th> <td>Economy</td> </tr> <tr> <th>Carriers reference number</th> <td>KCTOHD</td> </tr> <tr> <th>Ticket type</th> <td>ETK</td> </tr> </table> </div> </div> </section> <section class="booking-table"> <h2>Return segments</h2> <div class="table-segment"> <input type="checkbox" id="segment-3" name="segment-checker" value=""> <label for="segment-3" class="table-segment_title"> Berlin Central Station — Madrid Puerta de Atocha </label> <div class="table_wrapper"> <table> <tr> <th>Train / Bus / Flight</th> <td>LO0024 (LOT - Polish Airlines)</td> </tr> <tr> <th>Departure</th> <td>21:40, 18.09.2017</td> </tr> <tr> <th>Arrival</th> <td>18:00, 19.09.2017</td> </tr> <tr> <th>Tariff</th> <td>Economy</td> </tr> <tr> <th>Carriers reference number</th> <td>KD95RR</td> </tr> <tr> <th>Ticket type</th> <td>ETK</td> </tr> </table> </div> </div> </section> <section class="passengers-table"> <h2>Passengers</h2> <table class="passengers-desktop"> <tr> <th>Full name</th> <th>Sex</th> <th>ID serial number</th> <th>Birth date</th> </tr> <tr> <td>Anna Zagurovskaya</td> <td>FEMALE</td> <td>EE111111</td> <td>1990-01-16</td> </tr> <tr> <td>Extralarge Bohdan</td> <td>MALE</td> <td>EE111112</td> <td>1987-09-23</td> </tr> <tr> <td>Bohdanovsky Paladin</td> <td>MALE</td> <td>EE111113</td> <td>1825-09-24</td> </tr> <tr> <td>Justsomeanotherlong Namehere</td> <td>MALE</td> <td>EE111114</td> <td>1999-09-25</td> </tr> </table> <div class="passengers-mobile"> <div class="table-segment"> <input type="checkbox" id="passenger-1" name="passenger-checker" value=""> <label for="passenger-1" class="table-segment_title"> Anna Zagurovskaya </label> <div class="table_wrapper"> <table> <tr> <th>Full name</th> <td>Anna Zagurovskaya</td> </tr> <tr> <th>Sex</th> <td>FEMALE</td> </tr> <tr> <th>ID serial number</th> <td>EE111111</td> </tr> <tr> <th>Birth date</th> <td>1990-01-16</td> </tr> </table> </div> </div> <div class="table-segment"> <input type="checkbox" id="passenger-2" name="passenger-checker" value=""> <label for="passenger-2" class="table-segment_title"> Extralarge Bohdan </label> <div class="table_wrapper"> <table> <tr> <th>Full name</th> <td>Extralarge Bohdan</td> </tr> <tr> <th>Sex</th> <td>MALE</td> </tr> <tr> <th>ID serial number</th> <td>EE111112</td> </tr> <tr> <th>Birth date</th> <td>1987-09-23</td> </tr> </table> </div> </div> <div class="table-segment"> <input type="checkbox" id="passenger-3" name="passenger-checker" value=""> <label for="passenger-3" class="table-segment_title"> Bohdanovsky Paladin </label> <div class="table_wrapper"> <table> <tr> <th>Full name</th> <td>Bohdanovsky Paladin</td> </tr> <tr> <th>Sex</th> <td>MALE</td> </tr> <tr> <th>ID serial number</th> <td>EE111113</td> </tr> <tr> <th>Birth date</th> <td>1825-09-24</td> </tr> </table> </div> </div> <div class="table-segment"> <input type="checkbox" id="passenger-4" name="passenger-checker" value=""> <label for="passenger-4" class="table-segment_title"> Justsomeanother Namehere </label> <div class="table_wrapper"> <table> <tr> <th>Full name</th> <td>Justsomeanotherlong Namehere</td> </tr> <tr> <th>Sex</th> <td>MALE</td> </tr> <tr> <th>ID serial number</th> <td>EE111114</td> </tr> <tr> <th>Birth date</th> <td>1999-09-25</td> </tr> </table> </div> </div> </div> </section> <section class="contact-details-table"> <h2>Contact details</h2> <table class="contact-details-desktop"> <tr> <th>Full name</th> <th>Phone</th> <th>E-mail</th> </tr> <tr> <td>Mauricio Fastichelli</td> <td>+380935513047</td> <td class="contact-details-email">[email protected]</td> </tr> </table> <table class="contact-details-mobile"> <tr> <th>Full name</th> <td>Mauricio Fastichelli</td> </tr> <tr> <th>Phone</th> <td>+380935513047</td> </tr> <tr> <th>E-mail</th> <td class="contact-details-email">[email protected]</td> </tr> </table> </section> <section class="price-table"> <h2>Price</h2> <table> <tr> <th>Fare</th> <th>Fees</th> <th>Agent service fee</th> <th>Total</th> </tr> <tr> <td>2 964.98 UAH</td> <td>1 296.50 UAH</td> <td>1 190.00 UAH</td> <td>105 630.74 UAH</td> </tr> </table> </section>
</main> <script src="js/index.js"></script>
</body>
</html>
Vanilla CSS Accordion and Responsive Tables - Script Codes CSS Codes
/* Global Data Page Styles */
body { width: 100%; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;
}
input[type="checkbox"] { position: absolute; visibility: hidden; opacity: 0; z-index: -1;
}
.data-page { width: 100%; padding-top: 10px; padding-bottom: 40px;
}
.data-page h2 { margin-bottom: 12px; font-size: 28px; line-height: 30px;
}
.data-page section { width: 80vw; max-width: 1400px; margin: 0 auto;
}
.data-page section + section { margin-top: 40px;
}
.data-page table { width: 100%; text-align: left; border-collapse: collapse;
}
.data-page tr { border-top: 1px solid #cdcfd4; transition: all .2s ease;
}
.booking-table table tr,
.data-page tr:first-child { border-top: 0;
}
.data-page th,
.data-page td { padding: 10px;
}
.data-page th:first-child { width: 300px;
}
.table-segment_title { position: relative; display: block; padding: 12px 60px 12px 12px; cursor: pointer; font-size: 18px; font-weight: 700;
}
.contact-details-table .contact-details-email { width: auto; word-break: break-word;
}
/* END Global Data Page Styles */
/* Tables Accordion Styles */
.table-segment { border-right: 1px solid #c8c8c8; border-left: 1px solid #c8c8c8; border-bottom: 1px solid #c8c8c8;
}
.booking-table h2 + .table-segment,
.passengers-mobile .table-segment:first-child { border-top: 1px solid #c8c8c8;
}
.table-segment_title::before,
.table-segment_title::after { content: ''; position: absolute; top: 50%; display: block; background-color: #dcdcdc; transform-origin: center; transform: translateY(-50%); transition: all .25s ease-out;
}
.table-segment_title::before { right: 20px; width: 20px; height: 2px;
}
.table-segment_title::after { right: 29px; width: 2px; height: 20px;
}
.table-segment:hover label::before,
.table-segment:hover label::after { background-color: #1236aa;
}
.table_wrapper { height: 0; overflow: hidden; transition: all .25s ease-out;
}
.table_wrapper table { margin-top: 10px; margin-bottom: 12px;
}
.table-segment input:checked ~ .table_wrapper { height: 263px;
}
.passengers-mobile input:checked ~ .table_wrapper { height: auto;
}
.table-segment input:checked ~ label::before,
.table-segment input:checked ~ label::after { background-color: #1236aa; transform: translateY(-50%) rotate(135deg);
}
/* END Tables Accordion Styles */
/* Data Page Media Queries */
@media (max-width: 1440px) { .data-page section { width: 90vw; }
}
@media (max-width: 992px) { .table-segment input:checked ~ .table_wrapper { height: auto; }
}
@media (min-width: 861px) { .passengers-mobile, .contact-details-mobile { display: none; }
}
@media (max-width: 860px) { .passengers-desktop, .contact-details-desktop { display: none; } .passengers-mobile tr, .contact-details-mobile tr { border-top: 0; } .price-table tr { display: inline-block; border-top: 0; transition: all .3s ease; } .price-table th, .price-table td { display: block; }
}
@media (max-width: 768px) { .data-page { font-size: 14px; line-height: 18px; } .data-page h2 { margin-bottom: 8px; font-size: 24px; line-height: 28px; } .table-segment_title { font-size: 16px; } .data-page th:first-child { width: 200px; }
}
@media (max-width: 600px) { .data-page th:first-child { width: 150px; max-width: 150px; }
}
@media (max-width: 480px) { .price-table th { max-width: 150px; }
}
@media (max-width: 375px) { .data-page h2 { font-size: 20px; line-height: 24px; } .data-page th:first-child { width: 120px; max-width: 120px; } .table-segment_title { padding-right: 52px; } .table-segment_title::before { right: 12px; } .table-segment_title::after { right: 21px; }
}
/* END Data Page Media Queries */Vanilla CSS Accordion and Responsive Tables - Script Codes JS Codes
// Depends of your case
| Developer | Maxim Konoval |
| Username | Said_FD |
| Uploaded | January 27, 2023 |
| Rating | 3 |
| Size | 3,826 Kb |
| Views | 2,024 |
Do you need developer help for Vanilla CSS Accordion and Responsive Tables?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Maxim Konoval (Said_FD) Script Codes
| Name | Size |
| Animated Carousel on CSS with Minimal JS | 6,787 Kb |
| My Portfolio | 6,798 Kb |
| Brutal Responsive Landing Page Prototype | 5,482 Kb |
| Vanilla CSS Switcher | 2,296 Kb |
| CS-Service Landing Page | 6,657 Kb |
| A Pen by Maxim Konoval | 1,609 Kb |
| CSS Transforms Test | 2,455 Kb |
| SVG Scalable Text | 1,451 Kb |
| Responsive Price List | 11,134 Kb |
| Tactical Monkey | 2,889 Kb |
Create amazing sales emails with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Simple star rating using js and data-uri | TheEnd | 5,795 Kb |
| Content Changer | Cliffpyles | 4,538 Kb |
| Lecture 1 | Law | 0 Kb |
| Vertical Pan Hammer.js example | Jtangelder | 2,144 Kb |
| Shape Outside - Polygon | Stacy | 3,954 Kb |
| My Interests | Anshusaxenaarora | 2,015 Kb |
| Count checked checkboxes with jQuery | Mestika | 2,343 Kb |
| Wikipedia Viewer | Codinger | 4,681 Kb |
| Single element checkbox | Ivijaygupta | 1,996 Kb |
| Simple Accordion | Wearebold | 3,683 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!