Jump to content

Open & Close W3 Accordion

01Moonlight

By 01Moonlight
in JavaScript

 Share

Recommended Posts

01Moonlight Newbie

01Moonlight

Posted
Posted

Hi - I'm using the W3 Accordion code with the flowing JS.

<script type="text/javascript">
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc.addEventListener("click", function() 
  {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

 

However, I would like to only have one tab open at a time. I found a script similar to what I'm looking for at:

https://stackoverflow.com/questions/45214002/w3-accordion-auto-close-sections-and-open-close-all 

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {

	if( !this.classList.contains('active') ){
    	closeAll();
    }
	
  this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}

function openAll(){
    for (i = 0; i < acc.length; i++) {
    	acc[i].classList.add("active");
        acc[i].nextElementSibling.style.maxHeight = acc[i].nextElementSibling.scrollHeight + "px";
    }
}

function closeAll(){
	 for (i = 0; i < acc.length; i++) {
    	acc[i].classList.remove("active");
        acc[i].nextElementSibling.style.maxHeight = null;
    }
}

document.getElementById( 'openAll' ).addEventListener( 'click', openAll);
document.getElementById( 'closeAll' ).addEventListener( 'click', closeAll);

However, when I replace the code or put any other JS in, the panels no longer open. I don't know anything about JS so I don't know what's wrong.

Thanks.

 

Link to comment
Share on other sites
  • 2 weeks later...
JMRKER Member

JMRKER

Posted
Posted

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!

:)

Link to comment
Share on other sites
  • 2 months later...
Mei Giyanto Newbie

Mei Giyanto

Posted
Posted
On 1/27/2019 at 8:22 AM, JMRKER said:

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

Link to comment
Share on other sites
JMRKER Member

JMRKER

Posted
Posted
17 hours ago, Mei Giyanto said:

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

That statement is totally un-helpful.  You need to show some code or describe your problem with some examples for me to help.

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...