Ein Accordion, wo sich jedes Feld einzeln öffnen lässt, aber alle auf einmal schließt.
Code
<!DOCTYPE html>
<html>
<head>
<title>Accordeon mit Js</title>
<script src="/js_webseite/jquery.js"></script>
<style>
body {
color: #2c3e50;
background: #ecf0f1;
}
h1 {
text-align: center;
}
.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;
height:60px;
padding: 0.5em 0 0 1em;
font-weight: bold;
line-height: 3;
cursor: pointer;
background: #2980b9;
}
.tab-content {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height .35s;
-o-transition: max-height .35s;
transition: max-height .35s;
background: #3498db;
}
.tab-content p {
margin: 1em;
}
.open{
height: 10em;
color:red;
overflow: hidden;
background: #1abc9c;
-webkit-transition: max-height .35s;
-o-transition: max-height .35s;
transition: max-height .35s;
background: #3498db;
}
/* Icon */
label::after {
position: absolute;
right: 0;
top: 10px;
display: block;
width: 3em;
height: 3em;
line-height: 3;
text-align: center;
transition: all .35s;
}
#link1{
content:'dd';
float:right;
margin-top:-15px;
padding:0 10px 0px 0;
color:green;
}
input[type=radio] + label::after {
content: "\25BC";
}
input[type=radio]:checked + label::after {
transform: rotateX(180deg);
}
</style>
</head>
<body>
<div class="wrapper">
<h1>Pure CSS Accordion</h1>
<div class="tab blue">
<input id="tab-four" type="radio" name="tabs2">
<label data-wert="a1" for="tab-four">Label One<a href="google.de" id="link1">Link</a></label>
<div id="a1" class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="tab blue">
<input id="tab-five" type="radio" name="tabs2">
<label data-wert="a2" for="tab-five">Label Two</label>
<div id="a2" class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="tab blue">
<input id="tab-six" type="radio" name="tabs2">
<label data-wert="a3" for="tab-six">Label Three</label>
<div id="a3" class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
</div>
</div>
<script>
$('label').click(function(){
g=$(this).data('wert');
gg=$('#'+g+'').hasClass('tab-content');
if(gg==true){
$('#'+g+'').removeClass('tab-content');
$('#'+g+'').addClass('open');
}else{
/*die beiden Zeilen aktivieren um einzelnz zu schliessen
$('#'+g+'').removeClass('open');
$('#'+g+'').addClass('tab-content');
*/
//so schliessen immer alle felder
$('#a1,#a2,#a3').removeClass('open');//einzeln schliesen
$('#a1,#a2,#a3').addClass('tab-content');
}
})
</script>
</body>
</head>