Accordeon läuft nicht richtig

Akkordeon hat ein Strich, den ich nicht wegbekommen.

Der hier verwendete Code

<!DOCTYPE html> <html class="no-js" lang="en"><head> <head> <title>Accordeon</title> </head> <style> body { color: #2c3e50; background: transparent; } h1 { text-align: center; } .half { float: left; width: 50%; padding: 0 1em; } /* Acordeon styles */ .tab { position: relative; margin-bottom: 10px; width: 100%; color: #fff; overflow: hidden; } input { position: absolute; opacity: 0; z-index: -1; } label { position: relative; display: block; padding: 0 0 0 1em; background: #16a085; font-weight: bold; line-height: 3; cursor: pointer; } .blue label { background: #2980b9; } .tab-content { max-height: 0; overflow: hidden; background: #1abc9c; -webkit-transition: max-height .35s; -o-transition: max-height .35s; transition: max-height .35s; } .blue .tab-content { background: red; } .tab-content p { margin: 1em; } /* :checked */ input:checked ~ .tab-content { max-height: 10em; } /* Icon */ label::after { position: absolute; right: 0; top: 0; display: block; width: 3em; height: 3em; line-height: 3; text-align: center; -webkit-transition: all .35s; -o-transition: all .35s; transition: all .35s; } input[type=checkbox1] + label::after { content: "+"; } input[type=checkbox] + label::after { content: "\25BC"; } input[type=checkbox1]:checked + label::after { transform: rotate(315deg); } input[type=checkbox]:checked + label::after { transform: rotateX(180deg); } </style> <body> <div class="wrapper"> <div class="half"> <div class="tab blue"> <input id="tab-four" type="checkbox" name="tabs1"> <label for="tab-four">xxxx1</label> <div class="tab-content"> <p>dies ist der aufgeklappte Text</p> </div> </div> <div class="tab blue"> <input id="tab-five" type="checkbox" name="tabs2"> <label for="tab-five">xxxx2</label> <div class="tab-content"> <p>dies ist der aufgeklappte Text</p> </div> </div> <div class="tab blue"> <input id="tab-six" type="checkbox" name="tabs3"> <label for="tab-six">xxxx3</label> <div class="tab-content"> <p>dies ist der aufgeklappte Text</p> </div> </div> </div> </div> </div> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!