Accordion Menu öffnen und schließen funktion möglich?
Hi Freunde,
mal wieder etwas wo ich ein wenig Planlos bin.
https://jsfiddle.net/RXBeat/hquyanf9/1/
funktioniert wie ich es möchte. Wenn ich auf Grün klicke, sehe ich den Inhalt. Wenn ich auf Rot klicke, geht grün zu und rot geht auf. Alles super!
Aber wäre es möglich beispielsweise auf Grün zu klicken, es öffnet sich, wenn ich wieder auf Grün klicke, es sich schließt?
Kein Multimenu, ich möchte nicht das zwei gleichzeitig offen sind aber möchte das offene auch wieder schließen können.
Ideen und kleine Tipps?
Der hier verwendete Code
<style>
#lab1{
background-color:green;
}
#lab2{
background-color:red;
}
#lab3{
background-color:chocolate
}
.togglebox {
width: 92%;
height: 150%;
margin: 0 auto;
text-align: left;
line-height: 0.7;
}
.aus + .content{
height:0;
overflow:hidden;
}
.an + .content{
height:100%;
}
.an:after{
content:'⬆';
float:right;
transform:rotate(0deg);
transition:all 500ms;
font-weight:900;
font-size:16px;
}
.aus:after{
content:'⬆';
float:right;
transform:rotate(180deg);
transition:all 500ms;
font-weight:900;
font-size:16px;
}
label {
display: block;
height: 24px;
line-height: 24px;
padding: 0 20px;
font-size: 14px;
font-weight: bold;
color: white;
text-shadow: black 0.1em 0.1em 0.2em;
background: #2e4155;
cursor: pointer;
}
.content{
border:1px solid black;
}
</style>
<script src="/js_webseite/jquery.js"></script>
<div class="togglebox">
<label class="aus" id="lab1">111</label>
<div class="content">
<p>Zeile 1</p>
<p>Zeile 2</p>
<p>Zeile 3</p>
</div>
<label class="aus" id="lab2">222</label>
<div class="content">
<p>Zeile 1</p>
<p>Zeile 2</p>
<p>Zeile 3</p>
</div>
<label class="aus" id="lab3">333</label>
<div class="content">
<p>Zeile 1</p>
<p>Zeile 2</p>
<p>Zeile 3</p>
</div>
</div>
<script>
lab=document.querySelectorAll('label');
lab.forEach((i)=>{
i.addEventListener('click',function(){
ausan=i.classList.contains('aus');
if(ausan==true){
lab.forEach((j)=>{
ausan1=j.classList.contains('an');
if(ausan1==true){
j.classList.remove('an');
j.classList.add('aus');
}
});
i.classList.remove('aus');
i.classList.add('an');
}else{
i.classList.remove('an');
i.classList.add('aus');
}
})
})
</script>