Menu
I am trying to do an accordion when the upper level i selected. I can easily select the panel inside the accordion, but how should I make the upper level stay selected?
TIA,
<i>
</i><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<title> Accordion Menu </title>
<!-- From: https://jsfiddle.net/w4mv5hLb/20/ -->
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.accordion:hover {
background-color: #900;
}
.panel {
padding: 10px;
display: none;
background-color: white;
overflow: hidden;
}
.accordion.open {
background-color: #900;
}
.panel.open {
display: block;
}
</style>
</head>
<body>
<button class="accordion">Section 1</button>
<div class="panel open">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<i> </i><button class="accordion">Section 2</button>
<i> </i><div class="panel">
<i> </i> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<i> </i> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<i> </i></div>
<i> </i><button class="accordion">Section 3</button>
<i> </i><div class="panel">
<i> </i> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<i> </i> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<i> </i></div>
<script>
const acc = document.querySelectorAll('.accordion');
acc.forEach(
function(elem) {
elem.addEventListener('click', function(evt) {
/* Modify as follows or remove altogether
acc.forEach(function(elem) {
if (elem != acc[0]) { elem.nextElementSibling.classList.remove("open") };
});
/* */
var panel = evt.target.nextElementSibling;
if (elem != acc[0]) { panel.classList.toggle('open'); }
}, true);
}
);
</script>
</body>
</html>
>@JMRKER#1610204 Make the following changes to your code.
> Add 'open' to the class of the first DIV
<i>
</i><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<title> Accordion Panels </title>
<!-- Modified From: http://w3schools.invisionzone.com/topic/60248-link-to-open-accordion/ -->
<style>
.accordion {
background: none;
color: black;
cursor: pointer;
padding: 0.5em;
width: 50%;
text-align: left;
font-size: 1em;
font-weight: bold;
transition: 0.4s;
}
.accordion:after {
content: ' 02B';
color: #2e6885;
font-weight: bold;
float: right;
margin-left: 0.25em;
}
.accordion:hover {
background: lime; /* color: black; */
}
.mark { background: lime; }
.mark:after { content: "2212"; }
.hide { display: none; }
.panel {
padding: 0 1em;
background-color: white;
transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>
<button class="accordion">TITLE 1</button>
<div class="panel hide"> <p> CONTENT</p> </div>
<button class="accordion">TITLE 2</button>
<div class="panel hide"> <p>CONTENT</p> </div>
<button class="accordion">TITLE 3</button>
<div class="panel hide"> <p>CONTENT</p> </div>
<script>
console.clear();
const doc = (IDS) => document.getElementById(IDS);
var sel = document.querySelectorAll('.accordion'),
pan = document.querySelectorAll('.panel');
for (const [i, el] of sel.entries()) {
el.addEventListener('click', function() { test(el, i); } );
}
function test(info, ndx) {
const selMatch = [...sel].filter( (elem) => { // expressions that return 'false' are retained
return info != elem;
});
selMatch.forEach( x => { x.classList.remove('mark');
x.nextElementSibling.classList.add('hide') } );
<i> </i>info.classList.toggle('mark');
<i> </i>if ( info.classList.contains('mark')) { pan[ndx].classList.remove('hide'); }
<i> </i> else { pan[ndx].classList.add('hide'); }
}
sel[0].click();
</script>
</body>
</html>
>@JMRKER#1610224 Will try one more time...
const doc = (IDS) => document.getElementById(IDS);``<i>
</i><div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
Collapsible Group Item #3
</a>
</div>
<div id="collapseThree" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>
</div><i>
</i>````<i>
</i> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script><i>
</i>``0.1.9 — BETA 4.19