CSS only accordion

Developer

Size

5,327 Kb

Views

8,096

CSS only accordion Previews
CSS only accordion HTML Codes
CSS only accordion CSS Codes

How do I make an css only accordion?

CSS only accordion using checkboxes and radio buttons - max-height transition. What is a css only accordion? How do you make a css only accordion? This script and codes were developed by Camilla Knap on 29 November 2022, Tuesday.

CSS only accordion Previews

CSS only accordion - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS only accordion</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="accordion"> <h4>CSS accordion using check boxes - all can be expanded at the same time - no js - max-height transition</h4> <input type="checkbox" name="accordion" id="checkbox-1" checked="checked"/> <label for="checkbox-1">Checkbox label 1</label> <div class="accordion__content" id="content-checkbox-1"> <p>Bacon ipsum dolor amet ham beef cupim, capicola bresaola short ribs brisket porchetta cow tail drumstick chuck rump boudin. Short loin fatback beef ribs sausage, jowl ham porchetta short ribs frankfurter alcatra. Flank bresaola boudin tenderloin ground round spare ribs brisket hamburger bacon alcatra meatball andouille pastrami jowl. Ball tip landjaeger doner t-bone flank ham brisket turducken alcatra meatloaf. Boudin doner pig chicken, turkey shoulder tail. T-bone leberkas tail andouille turkey, picanha landjaeger jowl frankfurter boudin tongue meatball kevin.</p> <p>Pork loin kevin filet mignon pastrami kielbasa drumstick, ball tip jowl ham hock tenderloin hamburger bacon strip steak shoulder. Chuck bacon salami swine tenderloin capicola meatloaf pork belly picanha beef ribs alcatra ham hock. Prosciutto meatball alcatra, jerky bresaola cupim flank pancetta cow swine corned beef. Landjaeger salami shankle tenderloin turducken. Turducken tri-tip ham, pastrami short ribs boudin landjaeger shankle prosciutto pork porchetta pancetta corned beef. Sirloin meatloaf boudin jerky pancetta turducken pork loin tongue corned beef salami shankle short ribs biltong fatback ground round. Sirloin venison prosciutto cow biltong.</p> <p>Bacon ipsum dolor amet ham beef cupim, capicola bresaola short ribs brisket porchetta cow tail drumstick chuck rump boudin. Short loin fatback beef ribs sausage, jowl ham porchetta short ribs frankfurter alcatra. Flank bresaola boudin tenderloin ground round spare ribs brisket hamburger bacon alcatra meatball andouille pastrami jowl. Ball tip landjaeger doner t-bone flank ham brisket turducken alcatra meatloaf. Boudin doner pig chicken, turkey shoulder tail. T-bone leberkas tail andouille turkey, picanha landjaeger jowl frankfurter boudin tongue meatball kevin.</p> <p>Pork loin kevin filet mignon pastrami kielbasa drumstick, ball tip jowl ham hock tenderloin hamburger bacon strip steak shoulder. Chuck bacon salami swine tenderloin capicola meatloaf pork belly picanha beef ribs alcatra ham hock. Prosciutto meatball alcatra, jerky bresaola cupim flank pancetta cow swine corned beef. Landjaeger salami shankle tenderloin turducken. Turducken tri-tip ham, pastrami short ribs boudin landjaeger shankle prosciutto pork porchetta pancetta corned beef. Sirloin meatloaf boudin jerky pancetta turducken pork loin tongue corned beef salami shankle short ribs biltong fatback ground round. Sirloin venison prosciutto cow biltong.</p> </div> <input type="checkbox" name="accordion" id="checkbox-2"/> <label for="checkbox-2">Checkbox label 2</label> <div class="accordion__content" id="content-checkbox-2"> <p>Pork chop ham cow, jerky cupim brisket kevin pastrami beef ribs spare ribs sirloin salami rump meatball jowl. Shoulder bacon drumstick, filet mignon t-bone rump ham hock meatloaf shankle tail spare ribs leberkas biltong. Fatback boudin hamburger pork chop salami. Drumstick capicola turkey porchetta biltong short loin frankfurter meatloaf.</p> </div> <input type="checkbox" name="accordion" id="checkbox-3"/> <label for="checkbox-3">Checkbox label 3</label> <div class="accordion__content" id="content-checkbox-3"> <p>Jerky chuck capicola spare ribs turkey jowl frankfurter shoulder doner pork rump beef ribs strip steak. Sirloin ground round tail salami pancetta ham hock capicola swine turducken alcatra kielbasa ribeye leberkas jowl. Chicken bacon alcatra pork belly sausage meatloaf tri-tip t-bone ham salami rump pork chop porchetta kevin jowl. Fatback salami meatloaf pastrami strip steak tongue. Turducken cow turkey fatback. </p> </div>
</div>
<div class="accordion"> <h4>CSS accordion using radio buttons - only one can be expanded at a time - no js - max-height transition</h4> <input type="radio" name="accordion" id="radio-1" checked="checked"/> <label for="radio-1">Radio label 1</label> <div class="accordion__content" id="content-radio-1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend id leo quis rutrum. Curabitur condimentum augue et dolor sodales, vel iaculis lacus feugiat.</p> </div> <input type="radio" name="accordion" id="radio-2"/> <label for="radio-2">Radio label 2</label> <div class="accordion__content" id="content-radio-2"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend id leo quis rutrum. Curabitur condimentum augue et dolor sodales, vel iaculis lacus feugiat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend id leo quis rutrum. Curabitur condimentum augue et dolor sodales, vel iaculis lacus feugiat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend id leo quis rutrum. Curabitur condimentum augue et dolor sodales, vel iaculis lacus feugiat.</p> </div> <input type="radio" name="accordion" id="radio-3"/> <label for="radio-3">Radio label 3</label> <div class="accordion__content" id="content-radio-3"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend id leo quis rutrum. Curabitur condimentum augue et dolor sodales, vel iaculis lacus feugiat. </p> </div>
</div>
</body>
</html>

CSS only accordion - Script Codes CSS Codes

.accordion input { display: none;
}
.accordion input + label { display: block; padding: 10px 15px; color: #fff; box-shadow: inset 0 -1px 0 0 #f97d82; background-color: #F7565D; cursor: pointer; outline: none; -webkit-transition: background-color 150ms ease; transition: background-color 150ms ease;
}
.accordion input + label:hover { background-color: #f6474f;
}
.accordion input:checked + label { background-color: #f5343c;
}
.accordion__content { max-height: 0px; overflow-x: hidden; -webkit-transition: max-height 400ms ease-in-out; transition: max-height 400ms ease-in-out;
}
#checkbox-1:checked ~ #content-checkbox-1 { max-height: 350px;
}
#checkbox-2:checked ~ #content-checkbox-2 { max-height: 350px;
}
#checkbox-3:checked ~ #content-checkbox-3 { max-height: 350px;
}
#checkbox-4:checked ~ #content-checkbox-4 { max-height: 350px;
}
#checkbox-5:checked ~ #content-checkbox-5 { max-height: 350px;
}
#checkbox-6:checked ~ #content-checkbox-6 { max-height: 350px;
}
#checkbox-7:checked ~ #content-checkbox-7 { max-height: 350px;
}
#checkbox-8:checked ~ #content-checkbox-8 { max-height: 350px;
}
#checkbox-9:checked ~ #content-checkbox-9 { max-height: 350px;
}
#checkbox-10:checked ~ #content-checkbox-10 { max-height: 350px;
}
#checkbox-11:checked ~ #content-checkbox-11 { max-height: 350px;
}
#checkbox-12:checked ~ #content-checkbox-12 { max-height: 350px;
}
#checkbox-13:checked ~ #content-checkbox-13 { max-height: 350px;
}
#checkbox-14:checked ~ #content-checkbox-14 { max-height: 350px;
}
#checkbox-15:checked ~ #content-checkbox-15 { max-height: 350px;
}
#checkbox-16:checked ~ #content-checkbox-16 { max-height: 350px;
}
#checkbox-17:checked ~ #content-checkbox-17 { max-height: 350px;
}
#checkbox-18:checked ~ #content-checkbox-18 { max-height: 350px;
}
#checkbox-19:checked ~ #content-checkbox-19 { max-height: 350px;
}
#checkbox-20:checked ~ #content-checkbox-20 { max-height: 350px;
}
#checkbox-21:checked ~ #content-checkbox-21 { max-height: 350px;
}
#checkbox-22:checked ~ #content-checkbox-22 { max-height: 350px;
}
#checkbox-23:checked ~ #content-checkbox-23 { max-height: 350px;
}
#checkbox-24:checked ~ #content-checkbox-24 { max-height: 350px;
}
#checkbox-25:checked ~ #content-checkbox-25 { max-height: 350px;
}
#checkbox-26:checked ~ #content-checkbox-26 { max-height: 350px;
}
#checkbox-27:checked ~ #content-checkbox-27 { max-height: 350px;
}
#checkbox-28:checked ~ #content-checkbox-28 { max-height: 350px;
}
#checkbox-29:checked ~ #content-checkbox-29 { max-height: 350px;
}
#checkbox-30:checked ~ #content-checkbox-30 { max-height: 350px;
}
#checkbox-31:checked ~ #content-checkbox-31 { max-height: 350px;
}
#checkbox-32:checked ~ #content-checkbox-32 { max-height: 350px;
}
#checkbox-33:checked ~ #content-checkbox-33 { max-height: 350px;
}
#checkbox-34:checked ~ #content-checkbox-34 { max-height: 350px;
}
#checkbox-35:checked ~ #content-checkbox-35 { max-height: 350px;
}
#checkbox-36:checked ~ #content-checkbox-36 { max-height: 350px;
}
#checkbox-37:checked ~ #content-checkbox-37 { max-height: 350px;
}
#checkbox-38:checked ~ #content-checkbox-38 { max-height: 350px;
}
#checkbox-39:checked ~ #content-checkbox-39 { max-height: 350px;
}
#checkbox-40:checked ~ #content-checkbox-40 { max-height: 350px;
}
#checkbox-41:checked ~ #content-checkbox-41 { max-height: 350px;
}
#checkbox-42:checked ~ #content-checkbox-42 { max-height: 350px;
}
#checkbox-43:checked ~ #content-checkbox-43 { max-height: 350px;
}
#checkbox-44:checked ~ #content-checkbox-44 { max-height: 350px;
}
#checkbox-45:checked ~ #content-checkbox-45 { max-height: 350px;
}
#checkbox-46:checked ~ #content-checkbox-46 { max-height: 350px;
}
#checkbox-47:checked ~ #content-checkbox-47 { max-height: 350px;
}
#checkbox-48:checked ~ #content-checkbox-48 { max-height: 350px;
}
#checkbox-49:checked ~ #content-checkbox-49 { max-height: 350px;
}
#checkbox-50:checked ~ #content-checkbox-50 { max-height: 350px;
}
#radio-1:checked ~ #content-radio-1 { max-height: 350px;
}
#radio-2:checked ~ #content-radio-2 { max-height: 350px;
}
#radio-3:checked ~ #content-radio-3 { max-height: 350px;
}
#radio-4:checked ~ #content-radio-4 { max-height: 350px;
}
#radio-5:checked ~ #content-radio-5 { max-height: 350px;
}
#radio-6:checked ~ #content-radio-6 { max-height: 350px;
}
#radio-7:checked ~ #content-radio-7 { max-height: 350px;
}
#radio-8:checked ~ #content-radio-8 { max-height: 350px;
}
#radio-9:checked ~ #content-radio-9 { max-height: 350px;
}
#radio-10:checked ~ #content-radio-10 { max-height: 350px;
}
#radio-11:checked ~ #content-radio-11 { max-height: 350px;
}
#radio-12:checked ~ #content-radio-12 { max-height: 350px;
}
#radio-13:checked ~ #content-radio-13 { max-height: 350px;
}
#radio-14:checked ~ #content-radio-14 { max-height: 350px;
}
#radio-15:checked ~ #content-radio-15 { max-height: 350px;
}
#radio-16:checked ~ #content-radio-16 { max-height: 350px;
}
#radio-17:checked ~ #content-radio-17 { max-height: 350px;
}
#radio-18:checked ~ #content-radio-18 { max-height: 350px;
}
#radio-19:checked ~ #content-radio-19 { max-height: 350px;
}
#radio-20:checked ~ #content-radio-20 { max-height: 350px;
}
#radio-21:checked ~ #content-radio-21 { max-height: 350px;
}
#radio-22:checked ~ #content-radio-22 { max-height: 350px;
}
#radio-23:checked ~ #content-radio-23 { max-height: 350px;
}
#radio-24:checked ~ #content-radio-24 { max-height: 350px;
}
#radio-25:checked ~ #content-radio-25 { max-height: 350px;
}
#radio-26:checked ~ #content-radio-26 { max-height: 350px;
}
#radio-27:checked ~ #content-radio-27 { max-height: 350px;
}
#radio-28:checked ~ #content-radio-28 { max-height: 350px;
}
#radio-29:checked ~ #content-radio-29 { max-height: 350px;
}
#radio-30:checked ~ #content-radio-30 { max-height: 350px;
}
#radio-31:checked ~ #content-radio-31 { max-height: 350px;
}
#radio-32:checked ~ #content-radio-32 { max-height: 350px;
}
#radio-33:checked ~ #content-radio-33 { max-height: 350px;
}
#radio-34:checked ~ #content-radio-34 { max-height: 350px;
}
#radio-35:checked ~ #content-radio-35 { max-height: 350px;
}
#radio-36:checked ~ #content-radio-36 { max-height: 350px;
}
#radio-37:checked ~ #content-radio-37 { max-height: 350px;
}
#radio-38:checked ~ #content-radio-38 { max-height: 350px;
}
#radio-39:checked ~ #content-radio-39 { max-height: 350px;
}
#radio-40:checked ~ #content-radio-40 { max-height: 350px;
}
#radio-41:checked ~ #content-radio-41 { max-height: 350px;
}
#radio-42:checked ~ #content-radio-42 { max-height: 350px;
}
#radio-43:checked ~ #content-radio-43 { max-height: 350px;
}
#radio-44:checked ~ #content-radio-44 { max-height: 350px;
}
#radio-45:checked ~ #content-radio-45 { max-height: 350px;
}
#radio-46:checked ~ #content-radio-46 { max-height: 350px;
}
#radio-47:checked ~ #content-radio-47 { max-height: 350px;
}
#radio-48:checked ~ #content-radio-48 { max-height: 350px;
}
#radio-49:checked ~ #content-radio-49 { max-height: 350px;
}
#radio-50:checked ~ #content-radio-50 { max-height: 350px;
}
body { font-family: arial; font-size: 12px; line-height: 20px; background: #f5f5f5;
}
.accordion { max-width: 640px; margin: 40px auto;
}
.accordion__content { background-color: #fff;
}
p { margin: 10px 15px;
}

Home Page	Home
Developer	Camilla Knap
Username	clknap
Uploaded	November 29, 2022
Rating	3
Size	5,327 Kb
Views	8,096

Do you need developer help for CSS only accordion?

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!

Camilla Knap (clknap) Script Codes

Name	Size
Morph svg icons with greensock	3,706 Kb
Responsive table styling	2,891 Kb
Object-fit cover	2,249 Kb
A Pen by Camilla Knap	2,747 Kb
A Pen by Camilla Knap	2,974 Kb
Playing around with flexbox grid	2,363 Kb
Flexbox testing margin auto compared to flex-grow	2,426 Kb
Checkbox tag	2,679 Kb
Morph content	3,658 Kb
Snap animate percentage	3,545 Kb

Create amazing blog posts 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
Slim Grid SASS SCSS v3.2	Thesturs	4,709 Kb
Bootstrap Carousel Fade Transition	Rowno	2,484 Kb
Countdown with Rings	Ewganoel	2,490 Kb
A Pen by Jason Kinney	Jason-kinney	1,980 Kb
Scifi-style Interative Form	Aaronchuo	4,566 Kb
A Pen by Gregory Potdevin	GregoryPotdevin	1,713 Kb
Calendar	Miroot	2,033 Kb
Break Out	AzazelN28	12,431 Kb
Material design buttons	Fischaela	4,381 Kb
Yuliya v krylova	Rafszul	37,351 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!