Pure CSS Handwritten accordion

---restore content starts---

We often encounter accordion effects on our web pages, which are often written in jquery and JavaScript, but today we introduce an accordion written in plain CSS.

Here is the HTML section:

1 <Divclass= "Togglebox">2  　　 <inputID= "Toggle1"type= "Radio"name= "Toggle"checked= "Checked" />   <!--checked= "Checked" to add a default unwind style -3  　　 <label for= "Toggle1">Pure CSS Accordion</label>      4  　　 < SectionID= "Content1">5  　　　　 <P>6  　　　　　　 Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage Pig Leberkas, T-Bone sirloin Shoulde R Bresaola. Frankfurter Rump Porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.7  　　　　 </P>8  　　　　 <P>9  　　　　　　 Brisket Meatball Turkey short loin boudin leberkas meatloaf Chuck Andouille pork loin Pastrami Spare rib s pance TTA Rump. Frankfurter Corned Beef Beef Tenderloin short loin meatloaf swine ground round venison.Ten  　　　　 </P> One  　　 </ Section> A  　　 <inputID= "Toggle2"type= "Radio"name= "Toggle" /> -  　　 <label for= "Toggle2">Pure CSS Accordion</label> -  　　 < SectionID= "Content2"> the  　　　　 <P> -  　　　　　　 Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage Pig Leberkas, T-Bone sirloin Shoulde R Bresaola. Frankfurter Rump Porchetta ham. Pork belly prosciutto brisket meatloaf short ribs. -  　　　　 </P> - <P> +  　　　　　　 Brisket Meatball Turkey short loin boudin leberkas meatloaf Chuck Andouille pork loin Pastrami Spare rib s pance TTA Rump. Frankfurter Corned Beef Beef Tenderloin short loin meatloaf swine ground round venison. -  　　　　 </P> +  　　 </ Section> A  　　 <inputID= "Toggle3"type= "Radio"name= "Toggle" /> at  　　 <label for= "Toggle3">Pure CSS Accordion</label> -  　　 < SectionID= "Content3"> -  　　　　 <P> -  　　　　　　 Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage Pig Leberkas, T-Bone sirloin Shoulde R Bresaola. Frankfurter Rump Porchetta ham. Pork belly prosciutto brisket meatloaf short ribs. -  　　　　 </P> -  　　　　 <P> in Brisket Meatball Turkey short loin boudin leberkas meatloaf Chuck Andouille pork loin Pastrami Spare rib s pance TTA Rump. Frankfurter Corned Beef Beef Tenderloin short loin meatloaf swine ground round venison. -  　　　　 </P> to  　　 </ Section> +  　　 <inputID= "Toggle4"type= "Radio"name= "Toggle" /> -  　　 <label for= "Toggle4">Pure CSS Accordion</label> the  　　 < SectionID= "Content4"> * <P> $ Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage Pig Leberkas, T-Bone sirloin Shoulde R Bresaola. Frankfurter Rump Porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.Panax Notoginseng  　　　　 </P> -  　　　　 <P> the  　　　　　　 Brisket Meatball Turkey short loin boudin leberkas meatloaf Chuck Andouille pork loin Pastrami Spare rib s pance TTA Rump. Frankfurter Corned Beef Beef Tenderloin short loin meatloaf swine ground round venison. +  　　　　 </P> A  　　 </ Section> the </Div>

Here is the CSS style:

<style type= "Text/css" > *{margin:0;padding:0; }*,*:before, *:after{box-sizing:Border-box; }Html,body{Height:100%;Font:16px/1 ' Open Sans ', Sans-serif;Color:#555;background:#e5e5e5; }Body{padding:50px; }. Togglebox{width:400px;margin:0 Auto;background:#fff;Transform:Translatez (0);Box-shadow:0 1px 1px rgba (0, 0, 0, 0.1); }input[type= "Radio"]{position:Absolute;Opacity:0; }label{position:relative;Display:Block;Height:50px;Line-height:50px;padding:0 20px;font-size:14px;Font-weight: the;Border-top:1px solid #ddd;background:#fff;cursor:Pointer;background:Palegreen; }label[for*= ' 1 ']{Border:0; }Label:after{content:' < ';/*Add a drop-down icon after the label*/position:Absolute;Top:0px; Right:20px;transition:. 3s transform; } Section{Height:0;/*the section height is 0 before it is selected*/transition:. 3s All;Overflow:Hidden; }#toggle1: checked~label[for*= ' 1 ']:after, #toggle2: checked~label[for*= ' 2 ']:after, #toggle3 : checked~label[for*= ' 3 ']:after, #toggle4: checked~label[for*= ' 4 ']:after{/*Single Box Click to select the icon rotation-90 degrees*/Transform:Rotate ( -90deg); }#toggle1: checked~ #content1, #toggle2: checked~ #content2, #toggle3: checked~ #content3, #toggle4: checked~ #content4{Height:200px;/*The radio box is not selected with a height of 0, and the selection box is selected with a content height of*/}P{margin:15px 0;padding:0 20px;font-size:12px;Line-height:1.5; }</style>

Here are the effects:

This is a useful accordion and can be used without any javascript or jquery!!!.

---restore content ends---

Pure CSS Handwritten accordion