Exploring styling the HTML Details and Summary tags to create functional accordion without any javascript.
A Pen by Frederick Allen on CodePen.
H4sIAOhKjWUCA+w9B0ATS9Oxa+yoT7EeAaVoQnoABRvYEUWwAeIluUA0JDGFImDvvffee8Hee++9916w12f7d+8u7VIARfR9f/i+JyS3Nzs7Mzs7uzuFpRFjykRf2u/8YbPZIoEAAb85IgHb/LfxB+HwBXwelw/+EyBs8IHDpSECWh786LU6VANQidNrxVgCKhFjtttl9Zwch/H3f+SHRfAf/5cl9f2D/OdzeHwRny8SAf4L2UKOk/9/gP9YMibx/fP8F7HZAif//xT/47AEpgaLR7XxLDH4Jzf4L+TzHfBfILLkP5cjFAppCNvJ/9/+gyWrVRodEh7ZqFOr5o0CGR6pjRq2axbbLiwyvHFITZz/6QEe5GMGneb8+d/6cTz/c2cpyLH9x+UAE9Cp//8C/mv04hTwURurVujj5ErQOvf1P1fA41H4zxcIRE79nxc/8SpVdyQQUaAJYimKSFVImlwJKKJQYJo0OoKIMcB18BtB3JHmcUqVBkOgOCC6eFSHoBpM6alDDC9IwV+IQiVBdXKVkmyCyxWixVCNJB7TIjKVBhHD9nqxFocqlxlf17C0akzCghKo16FiBaZlocqU+kitWnhL+BPVFEtgSTEZqlfoYgEcqVxTB4HfEX97wT/1WkwTCz54x7DkSolCL8Xqe5m6AA3xhyTIrgR+hLB3xb/ElFLwW4NpJXoM/yIJ1SgRBt4wAME0GjAEME7THEG83FM93FgSBarVspRoApYegODfJGBaLRqHpXsz6ARY+B8djBiMQK7EpPW9GumVUoBVQEBzA4Le5HCtn7DUGnkiqsNiEzBdvEoaawQSQI7O8KrbT7wbmyQHD/S6WHyYscTAIJFswMIHGoslogogLjiFSOh0/AOqkKNaxBFcw0O8OUDF8NlLpcYlx8Ack+yRkmLOfTWqizcxmESTJcZ/Ew91qlgjKBwcwXog7GYSk80XtbFiTAaFPxBpIldgQEjlWl19L4M0IfWRYLmGhSl1GjmmNX7N0sp7YkgAwjUCI4QL/pgJ |
<h1>Pure CSS Tabs With Indicator</h1> | |
<div class="tabs"> | |
<input type="radio" id="tab1" name="tab-control" checked> | |
<input type="radio" id="tab2" name="tab-control"> | |
<input type="radio" id="tab3" name="tab-control"> | |
<input type="radio" id="tab4" name="tab-control"> | |
<ul> | |
<li title="Features"><label for="tab1" role="button"><svg viewBox="0 0 24 24"><path d="M14,2A8,8 0 0,0 6,10A8,8 0 0,0 14,18A8,8 0 0,0 22,10H20C20,13.32 17.32,16 14,16A6,6 0 0,1 8,10A6,6 0 0,1 14,4C14.43,4 14.86,4.05 15.27,4.14L16.88,2.54C15.96,2.18 15,2 14,2M20.59,3.58L14,10.17L11.62,7.79L10.21,9.21L14,13L22,5M4.93,5.82C3.08,7.34 2,9.61 2,12A8,8 0 0,0 10,20C10.64,20 11.27,19.92 11.88,19.77C10.12,19.38 8.5,18.5 7.17,17.29C5.22,16.25 4,14.21 4,12C4,11.7 4.03,11.41 4.07,11.11C4.03,10.74 4,10.37 4,10C4,8.56 4.32,7.13 4.93,5.82Z"/> | |
</svg><br><span>Features</span></label></li> |
<div class="tabs"> | |
<input class="input" name="tabs" type="radio" id="tab-1" checked="checked"/> | |
<label class="label" for="tab-1">Arlina Design</label> | |
<div class="panel"> | |
<h1>Arlina Design</h1> | |
<p>Arlina Design (specifically, the sweet orange) is the fruit of the citrus species Citrus × sinensis in the family Rutaceae</p> | |
<p>The fruit of the Citrus × sinensis is considered a sweet orange, whereas the fruit of the Citrus × aurantium is considered a bitter orange. The sweet orange reproduces asexually (apomixis through nucellar embryony); varieties of sweet orange arise through mutations.</p> | |
</div> | |
<input class="input" name="tabs" type="radio" id="tab-2"/> |
<section> | |
<h1>Latest Transactions</h1> | |
<h2>Today</h2> | |
<details> | |
<summary> | |
<div> | |
<span style="background-color: #f2dcbb;"> | |
<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256"> | |
<rect width="256" height="256" fill="none"></rect> | |
<path d="M192,120h27.05573a8,8,0,0,0,7.15542-4.42229l18.40439-36.80878a8,8,0,0,0-3.18631-10.52366L192,40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path> |
Exploring styling the HTML Details and Summary tags to create functional accordion without any javascript.
A Pen by Frederick Allen on CodePen.
A details element with a custom arrow, no javascript
A Pen by Niels Voogt on CodePen.