Hallo,
Ich habe ein "Accordeon" aus verschiedenen Quellen zusammengebastelt. Das läuft eigentlich ganz brauchbar, aber ich bringe es nicht hin dass es möglich ist, die aufgemachten Texte wieder zu schliessen, ohne dass man einen anderen Text aufklappen muss.
Hier der Code:
HTML
<!DOCTYPE html>
<html class="no-js" lang="en"><head>
<head>
<title>Accordeon</title>
</head>
<style type="text/css">
body {
color: #2c3e50;
background: transparent;
}
h1 {
text-align: center;
}
.half {
float: left;
width: 50%;
padding: 0 1em;
}
/* Acordeon styles */
.tab {
position: relative;
margin-bottom: 1px;
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=checkbox] + label::after {
content: "+";
}
input[type=radio] + label::after {
content: "\25BC";
}
input[type=checkbox]:checked + label::after {
transform: rotate(315deg);
}
input[type=radio]:checked + label::after {
transform: rotateX(180deg);
}
</style>
<body>
<div class="wrapper">
<div class="half">
<div class="tab blue">
<input id="tab-four" type="radio" name="tabs2">
<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="radio" 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="radio" name="tabs2">
<label for="tab-six">xxxx3</label>
<div class="tab-content">
<p>dies ist der aufgeklappte Text</p> </div>
</div>
</div>
</div>
</div>
</body>
</html>
Alles anzeigen
Und dann hätte ich noch gerne, dass der Strich zwischen den eInzelnen Texten dicker und transparent (damit der Hintergrund durchscheint) ist . Aber ich finde nicht raus was den Strich erzeugt.
Danke,
brainstuff