Jump to content
01Moonlight

Open & Close W3 Accordion

Recommended Posts

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.

 

Share this post


Link to post
Share on other sites

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!

:)

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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.

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...