lediable007 Posted January 23, 2017 Share Posted 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> Link to comment Share on other sites More sharing options...
dsonesuk Posted January 23, 2017 Share Posted January 23, 2017 Any code that does not validate html validation https://validator.w3.org/, I just not going to bother with,. Link to comment Share on other sites More sharing options...
lediable007 Posted January 24, 2017 Author Share Posted January 24, 2017 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted January 24, 2017 Share Posted 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. 1 Link to comment Share on other sites More sharing options...
lediable007 Posted January 25, 2017 Author Share Posted 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. Link to comment Share on other sites More sharing options...
RickyKS Posted March 4, 2019 Share Posted 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? Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now