Help with Accordion

lediable007 · January 23, 2017

Hi all, pleasure joining the forum. I'm relatively new to coding. Built out an accordion text container, but I'm having trouble with two things:

1) I want to close one tab in the accordion when the user clicks another tab.

2) I want to make the container itself expand with the accordion so that scrolling is not necessary.

I am using Wix to build my website, and thus I'm limited to an HTML container that I can drop onto a page. Is what I'm asking possible? And if so, how?

I'm building it out in the Try It Editor here.

This is the code I'm currently using:

<!DOCTYPE html>
<html>
<head>
<style>
button.accordion {
    background-color: #ffffff;
    color: #eeee;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2212";
}
button.accordion.active, button.accordion:hover {
    background-color: #246c78;
    color: #ffffff
}

button.accordion.active, button.accordion:hover {
    background-color: #246c78;
}
div.panel {
    padding: 0 18px;
    display: none;
    background-color: white;
}
</style>
</head>
<body>
<button class="accordion"><b><font face="avenir">Text.......</font></b></button>
<div class="panel">
  <p>
      <font face="avenir"> 
      </font>
  <p>
</div>

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

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

dsonesuk · January 23, 2017

Any code that does not validate html validation https://validator.w3.org/, I just not going to bother with,.

lediable007 · January 24, 2017

Any code that does not validate html validation https://validator.w3.org/, I just not going to bother with,.

Tough love, eh? Alright. I'll figure out the validation issue and get back promptly. Thanks again.

Edit:

All sorted now. Passed validation, except one issue with "element head is missing a required instance of a child element title", which I don't really get. This is the sandbox, and here's the redone code:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
p.sansserif {
	font-family: "avenir";
}
ul.sansserif {
	font-family:"avenir";
}
button.accordion {
    background-color: #ffffff;
    color: #eeee;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    font-family: "avenir";
    font-weight:bold;
}

button.accordion.active, button.accordion:hover {
    background-color: #246c78;
    color: #ffffff
}

button.accordion:after {
	content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}
button.accordion.active:after {
	content: "\2212";
}
    
div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
</head>
</style>
<body>

<button class="accordion">1. Graduation from a College approved midwifery education program:</button>
<div class="panel">
  <p class="sansserif"> Submit:</p>
  		<ul class="sansserif">
    		<li>Proof of successful completion of Canadian Midwifery Registration Exam</li>
        	<li><a href="https://dl.dropboxusercontent.com/s/gr5naq8wf0u7xeb/New-Midwife-Registration-form2.pdf?dl=0">Application for new registration</a></li>
        	<li>Original documentation of graduation, including transcript and clinical records</li>
        	<li>Current Certification in CPR, Obstetrical Emergency Skills, Neonatal Resuscitation and Fetal Health Surveillance (through Perinatal Services BC</li>
        	<li>Provide a current criminal record check (within 1 year</li>
        	<li>Apply to Established Practices for supervised employment</li>
        	<li>Registration fee</li>
            </ul>
</div>

<button class="accordion">2. Registration with another Canadian midwifery regulatory body:</button>
<div class="panel">
  <p class="sansserif">Under the <a href="http://www.ait-aci.ca/index_en/ait.htm">Agreement on Internal Trade (AIT)</a>, an applicant who has full registration in another Canadian jurisdiction and has practiced one year or more in that jurisdiction, will be eligible for registration without additional assessment, subject to the following:</p>
    	<ul class="sansserif">
    		<li> <a href="https://dl.dropboxusercontent.com/s/gr5naq8wf0u7xeb/New-Midwife-Registration-form2.pdf?dl=0">Application for new registration</a></li>
        	<li>Letter of Professional Standing from the provincial regulatory body</li>
        	<li>Current certification in CPR, Obstetrical Emergency Skills, NRP and Fetal Health Surveillance (through Perinatal Services BC)</li>
        	<li>Provide a current criminal record check (within 1 year)</li>
        	<li>Registration fee</li></ul>
</div>

<button class="accordion">3. Completion of an approved Prior Learning and Exprience Assessment (PLEA):</button>
<div class="panel">
  <p class="sansserif">The Canadian Midwifery Regulators Consortium has information and can provide assistance for those looking for information about becoming a Midwife in Canada. We recommend you review this information and complete the <a href=" http://access.nscc.ca/cgi-bin/perl/midwife/index.pl">Self Assessment Readiness Tool (SART©)</a> prior to completing the CMA application process.
    <br>
    <br>
Please note: Midwives must have the ability to communicate effectively with other caregivers, facilitating referral, consultation and collaboration when appropriate. As such, Candidates for PLEA MUST meet minimum English Language Standards to be considered (see Guide to Application for Assessment, Section G)
	<br>
    <br>
	<strong>PLEA: Steps for Applying for Assessment of Eligibility for Registration as a Midwife</strong>
    <br>
    <br>
In order to allow for the evaluation of your portfolio in time to apply to write the spring Midwifery Exams, COMPLETE PLEA applications must be received by the CMA by October 1 of the previous year. To write the fall Midwifery Exams, applications must be received by the CMA by April 1. The fee for assessment of eligibility is CAD$1500.<br><br>
Candidates must:</p>
</div>

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

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
  	  panel.style.maxHeight = null;
    } else {
  	  panel.style.maxHeight = panel.scrollHeight + 'px';
    } 
  }
}
</script>
</body>
</html>

Edited January 24, 2017 by lediable007

Ingolme · January 24, 2017

It is preferable to have code that validates, but don't judge us all by just one forum member.

To fix the remaining validation issue, just put a <title> element in the head.

To fix your first issue, each time a button is clicked, hide all of the menu elements, then show the one you need:

// For each button, assign an event handler
var acc = document.getElementsByClassName("accordion");
for (var i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", accordion);
}


// Event handler function
function accordion() {
  // Reset all of the elements
  for(var i = 0; i < acc.length; i++) {
    acc[i].classList.remove("active");
    acc[i].nextElementSibling.style.maxHeight = null;
  }

  // Toggle the "active" class for the current item
  this.classList.add("active");

  // Make the contents visible
  var panel = this.nextElementSibling;
  panel.style.maxHeight = panel.scrollHeight + 'px';
}

I am not experiencing the second issue you described. The container should expand to fit all its content, unless the content exceeds the browser's height.

lediable007 · January 25, 2017

Thank you! Worked like a charm. I realize now that my second issue can't be fixed, simply because it's an HTML container on a drag and drop website. The code will only work within the confines of the html container. If I expand the boundaries of the container to fill an entire page, it will work. Since I can't do that without having a page with ugly empty space on it, I'll have to deal with the scrolling issue.

Thanks again, you've been a great help.

It is preferable to have code that validates, but don't judge us all by just one forum member.

To fix the remaining validation issue, just put a <title> element in the head.

To fix your first issue, each time a button is clicked, hide all of the menu elements, then show the one you need:
// For each button, assign an event handler
var acc = document.getElementsByClassName("accordion");
for (var i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", accordion);
}


// Event handler function
function accordion() {
  // Reset all of the elements
  for(var i = 0; i < acc.length; i++) {
    acc[i].classList.remove("active");
    acc[i].nextElementSibling.style.maxHeight = null;
  }

  // Toggle the "active" class for the current item
  this.classList.add("active");

  // Make the contents visible
  var panel = this.nextElementSibling;
  panel.style.maxHeight = panel.scrollHeight + 'px';
}
I am not experiencing the second issue you described. The container should expand to fit all its content, unless the content exceeds the browser's height.

RickyKS · March 4, 2019

On 1/24/2017 at 5:02 PM, Ingolme said:
It is preferable to have code that validates, but don't judge us all by just one forum member.

To fix the remaining validation issue, just put a <title> element in the head.

To fix your first issue, each time a button is clicked, hide all of the menu elements, then show the one you need:
// For each button, assign an event handler
var acc = document.getElementsByClassName("accordion");
for (var i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", accordion);
}


// Event handler function
function accordion() {
  // Reset all of the elements
  for(var i = 0; i < acc.length; i++) {
    acc[i].classList.remove("active");
    acc[i].nextElementSibling.style.maxHeight = null;
  }

  // Toggle the "active" class for the current item
  this.classList.add("active");

  // Make the contents visible
  var panel = this.nextElementSibling;
  panel.style.maxHeight = panel.scrollHeight + 'px';
}
I am not experiencing the second issue you described. The container should expand to fit all its content, unless the content exceeds the browser's height.

--------------------------------------------------

When I input this code into my project, it works with the arrows correctly, where only one arrow will switch to the drop down, but the content is not being revealed. any help?

Sign In

Help with Accordion

Recommended Posts

lediable007

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

lediable007

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

lediable007

Link to comment

Share on other sites

RickyKS

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity