Kind of hard to tell what you are doing wrong when you provide only a portion of the overall code.
Here are two different accordion menus. The first allows multiple frames to be open at one time.
The second does more of what you want by opening only one frame at a time.
The code is mostly CSS driven. I modified the code with one JS function because I wanted the single frame version to be closed after it was open, but if you dont' care then you can remove the JS (and associated DIV modification) code and it will work just fine. See the reference to the original code versions.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Accordion Displays </title>
<!-- Modified From: https://codepen.io/raubaca/pen/PZzpVe -->
<style>
body {
color: #2c3e50;
background: #ecf0f1;
}
h1 { text-align: center; }
.half {
float: left;
width: 45%;
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: #3498db; }
.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>
</head>
<body>
<div class="wrapper">
<h1>Pure CSS Accordion</h1>
<div class="half">
<p>Open <strong>multiple</strong></p>
<div class="tab">
<input id="tab-one" type="checkbox" name="tabs"> <label for="tab-one">Label One</label>
<div 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">
<input id="tab-two" type="checkbox" name="tabs"> <label for="tab-two">Label Two</label>
<div 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">
<input id="tab-three" type="checkbox" name="tabs"> <label for="tab-three">Label Three</label>
<div 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 class="half">
<p>Open <strong>one</strong></p>
<div class="tab blue">
<input id="tab-four" type="radio" name="tabs2"> <label for="tab-four">Label One</label>
<!-- <div class="tab-content"> -->
<div class="tab-content" onclick="radioReset('tab-four')"> <!-- NOTE: special collapse of display -->
<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 for="tab-five">Label Two</label>
<!-- <div class="tab-content"> -->
<div class="tab-content" onclick="radioReset('tab-five')"> <!-- NOTE: special collapse of display -->
<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 for="tab-six">Label Three</label>
<!-- <div class="tab-content"> -->
<div class="tab-content" onclick="radioReset('tab-six')"> <!-- NOTE: special collapse of display -->
<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>
// JS not used!!! (except for special case).
function radioReset(info) { // alert('info.checked: '+info.checked); info.checked = false;
document.getElementById(info).checked = false; // special to collapse div
}
</script>
</body>
</html>
Good Luck!
I Have tried The code you suggested But in another part, if I make the search box using the input element tag it actually disappears cause that style with selector input on that style
Open & Close W3 Accordion
in JavaScript
Posted
I Have tried The code you suggested But in another part, if I make the search box using the input element tag it actually disappears cause that style with selector input on that style