Search the Community

I want multiple accordions on the website and that only one is open at a time. my code looks like this: HTML: <button onclick="openDropdown('drop1')" class="w3-button w3-block w3-black w3-left-align">Category 1</button> <div id="drop1" class="category w3-hide w3-animate-top"> <a href="#" class="w3-button w3-block w3-left-align">Link 1</a> <a href="#" class="w3-button w3-block w3-left-align">Link 2</a> <a href="#" class="w3-button w3-block w3-left-align">Link 3</a> </div> <button onclick="openDropdown('drop2')" class="w3-button w3-block w3-black w3-left-align">Category 2</button> <div id="drop2" class="category w3-hide w3-animate-top"> <a href="#" class="w3-button w3-block w3-left-align">Link 4</a> <a href="#" class="w3-button w3-block w3-left-align">Link 5</a> <a href="#" class="w3-button w3-block w3-left-align">Link 6</a> </div> JS: function openDropdown(element) { categories.forEach(category => { if(category.id !== element && category.className.indexOf("w3-show") !== -1){ category.className= category.className.replace(" w3-show", "") } }) let target = document.getElementById(element) if (target.className.indexOf("w3-show") !== -1) { target.className = target.className.replace(" w3-show", "") } else { target.className += " w3-show" } } categories is a list of all elements with the category class attached. The problem is that the website is scrolling up if drop1 is open and i try to open drop2.

Hi *** MY CONFIGURATION *** PHP 7.2.24 WBCE CMS 1.4.23 TEMPLATE : Acourdesz (horizontal accordion header) The “Acourdesz“ template comes with a horizontal accordion header that panes are opening on following mouse cursor movement detection : left to right and reversely ; up to down and reversely. I think that one may better reply to my question hereafter, knowing the accordion code structure from this demo page : http://www.dynamicdrive.com/dynamicindex17/haccordion.htm My wish is to prevent the panes opening when the mouse cursor is moved from up to down and reversely, so that panes only opens when mouse cursor is moved from left to right (and inversely). To achieve this, I may use one of my CMS add-on module that allows to include PHP, JS, or HTML code to a template or page (screenshot) : https://addons.wbce.org/pages/addons.php?do=item&item=37 Can someone help me to know what coding string to include using this module, so that it constrains the accordion to behave as I wish it to ? Regards

Hello, I'm quite new with HTML and CSS. I'd like to create an accordion with an for the expanded or collapsed state of the section. Unfortunately I couldn't find an example on w3schools. Do you have an example for my problem? Your help is highly appreciated. Sascha

First off, I am a newbie. I'm try to make the first accordion tab and heading tab open by default, but keep coming up short. Any and all help would be greatly appreciated! Sample url: https://www.iciwireless.com/industry-solutions-mat/construction.htm So, the "Two-way Radio" accordion and header tab should be open when entering the page. I'm using a DW template with repeatable regions to populate the accordions on a number of pages, which is working, but need the 1st accordion tab open. The last code that I tried was the following: <script> $(document).onload(function(){ $("#accordion1Collapse1").collapse('show'); }); }); </script> No luck there.

I followed the tutorial to create an accordion. Now, I would like to link to individual headers in that accordion and have them load opened. How can I edit the code to do this? Here is what I'm using: <style type="text/css">.accordion { background: none; color: #3d8bb1; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 18px; font-weight: bold; transition: 0.4s; } .active, .accordion:hover { background: none; color: #2e6885; } .accordion:after { content: '\002B'; color: #2e6885; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\2212"; } .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } </style> <button class="accordion">TITLE</button> <div class="panel"> <p> CONTENT</p> </div> <button class="accordion">TITLE</button> <div class="panel"> <p>CONTENT</p> </div> <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", 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>

I'm basically a coding amateur and need help! I used this page to find an accordion that works well for what I need (I'm looking for an accordion that can have all open at once) and am basically using this permutation, edited only for content & style. Is there a way to start with them all open instead of all closed? The simpler the better for this frustrated amateur! Thanks!

I have used the script for creating an accordion from w3Schools . I would like to add a button somwhere on the page that would collapse all that are open. Even if it is just a reload of the page which would work. <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].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> Please help. I am definitely a newbie. Linda

I followed these instructions: https://www.w3schools.com/howto/howto_js_accordion.asp It looks perfect: https://wesolvethem.com/accordion-sample/ But it doesn't work... :( I tried dropdown, and other codes and they all worked fine, but, of course the one I want won't work. It works find in the "try it yourself" area but not on my site even though the other codes work. I am using wordpress, and I deactivated all plugins and also tried different themes with no luck. Could anyone help me? I put this is CSS /* Style the buttons that are used to open and close the accordion panel */ .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; } /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ .active, .accordion:hover { background-color: #ccc; } /* Style the accordion panel. Note: hidden by default */ .panel { padding: 0 18px; background-color: white; display: none; overflow: hidden; } .accordion:after { content: '\02795'; /* Unicode character for "plus" sign (+) */ font-size: 13px; color: #777; float: right; margin-left: 5px; } .active:after { content: "\2796"; /* Unicode character for "minus" sign (-) */ } This in JS var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc.addEventListener("click", function() { /* Toggle between adding and removing the "active" class, to highlight the button that controls the panel */ this.classList.toggle("active"); /* Toggle between hiding and showing the active panel */ var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } I used this in the page <button class="accordion">Section 1</button> <div class="panel"> <p>Lorem ipsum...</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>Lorem ipsum...</p> </div> <button class="accordion">Section 3</button> <div class="panel"> <p>Lorem ipsum...</p> </div>

Hello This is my page: http://www.armonisencia.cl/site/puntos-de-venta/ In this page i'm using an accordion made in Javascript that i got from here: In desktop mode functions flawlessly, but when i shrink the nav window, some of the accodin headings become unclickable. If i put less items and try again, it works on a small scren, so i believe that the accordions are overlapping each other somehow and that's why maybe this is more a css issue than a Javascript issue so i didn't know where to post this. So, can you help me display this accordion on mobile devices?

Hello This is my page: http://www.armonisencia.cl/site/puntos-de-venta/ As you can see, below each "region" you have a gruopu of tabs that when you clik on any of them, they will show you a hidden div. The problem is that when i'm watching the page on my home, only the first tab of each group works and the others don't respond when i push them. What i'm doing wrong? Here's the code: <script> var accItem = document.getElementsByClassName('accordionItem'); var accHD = document.getElementsByClassName('accordionItemHeading'); for (i = 0; i < accHD.length; i++) { accHD[i].addEventListener('click', toggleItem, false); } function toggleItem() { var itemClass = this.parentNode.className; for (i = 0; i < accItem.length; i++) { accItem[i].className = 'accordionItem close'; } if (itemClass == 'accordionItem close') { this.parentNode.className = 'accordionItem open'; } } </script>

Is there any complete W3.JS solution for Tabs, Accordions, SlideShows etc?

Hello I want to put an accordion-like menu on my site. Looking on Google i came across this: https://codepen.io/raubaca/pen/PZzpVe So i tried to use it on my site here: http://www.armonisencia.cl/site/puntos-de-venta/ I like how when you put the input type as"select" in the tabs, they toggle open/close when you click them, but if you click another tab when you have one open, the first one keeps open. I wish it closed itself. By the other hand, i you put the input type as "radio" in the tabs, every time you lick on one of them, this opens and the others close. But you can close the open tab clicking it again. I wish i could have both effect in one. How can i do it?

First off, my knowledge is only on html and css, definitely not js! I have reproduced the examples as per here: https://www.w3schools.com/howto/howto_js_accordion.asp I eventually want to use it on a wordpress site, however, I am just trying to get it working to start with! I made a simple html file and simply copied and pasted the examples, using the animated accordion, but I cannot get the sections to open! I added the css and js into the header of the html file. Link: http://utterlydogs.com/accordion/

Hi everyone, I am a newbe and would like to ask for help with the following task: I am designing a website with a vertical accordion-menu on the left side that should stay fixed. So far no problem, an example I found on the w3school site. Now I would like the buttons that do not have sub-menu items to link to the index-, kontakt- pages directly. The recommended description to link a button is to include it into <form> tag and assign a «formaction» to it. When I do this the accordion looses the ability to spring open. Do I have to adapt anything in the Java-script or is there another way to solve this. Ideally I would like the accordion menu to behave like this: when clicking one menu item the corresponding page should be shown with the submenu items opened. when choosing anothe menu item that page should be opened and the previous sub-menu items closed. my coding attempt looks like that: ————————————————————————————— <!DOCTYPE html> <html><!-- InstanceBegin template="/Templates/acc_template.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>My Accordion Menu Website</title> <style> button.accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } button.accordion.active, button.accordion:hover { background-color: #ddd; } div.panel { padding: 0 18px; display: none; background-color: white; } </style> </head> <body> <!--Anfang Seiten-Menu Accordeon DIV--> <nav> <div class="accnavleft"> <!--Anfang Buttons--> <form><button class="accordion" formaction="/index.html">Homepage</button></form> <form> <button class="accordion" formaction="//page_one.html">Page one</button></form> <div class="panel"> <ul> <li><a href="#navb">first paragraph page one</a></li> <li><a href="#navc">2nd paragraph page one/a></li> <li><a href="#navd">3rd paragraph page one</a></li> <li><a href="#nave">4th paragraph page one/a></li> </ul> </div> <form> <button class="accordion" formaction="/page_two.html">Page two</button></form> <div class="panel"> <ul> <li><a href="#navf">first paragraph page two</a></li> <li><a href="#navg">2nd paragraph page two/a></li> <li><a href="#navh">3rd paragraph page two</a></li> <li><a href="#navi">4th paragraph page two/a></li> </ul> </div> <form> <button class="accordion" formaction="/page_three.html">Page three</button></form> <div class="panel"> <ul> <li><a href="#navj">first paragraph page three</a></li> <li><a href="#navk">2nd paragraph page three/a></li> <li><a href="#navl">3rd paragraph page three</a></li> <li><a href="#navm">4th paragraph page three/a></li> </ul> </div> <form> <button class="accordion" formaction="/kontakt.html">Kontakt</button></form> <div class="panel"> <ul> </ul> </div> <form> <button class="accordion" formaction="/impressum.html">Impressum</button></form> <div class="panel"> <ul> </ul> </div> </div> </nav> <!--end Seiten Menu DIV accordeon --> <!--Java Script of Accordion --> <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc.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> <!--end of Accordion --> <!-- "Content" --> <main> <div style="margin-left:25%;padding:1px 16px;height:100%;"> <h1>first paragraph page one</h1><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum. <a name="navb"></a> <h1>2nd paragraph page one</h1><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum. <a name="navc"></a> <h1>3rd paragraph page one</h1><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum. <a name="navd"></a> <h1>4th paragraph page one</h1><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum. <a name="nave"></a> <h1>5th paragraph page one</h1><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum. <a name="navf"></a> </div> </main> <!-- End Content --> </body> </html> Accord_Menu_Button_link.html

I am looking for assistance with my accordion code shown below. It functions perfect, but I am trying to get it so that when a panel is clicked and opened, if it is clicked again it will also close. I also want it to still close if another panel is clicked and opened, which is already working great thanks to you. <style> button.accordion { background-color: #262624; color: #f98100; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 18px; transition: 0.4s; font-family: Playfair Display; } button.accordion.active, button.accordion:hover { background-color: #ffffff; } button.accordion:after { content: '\002B'; color: #f98100; font-weight: bold; float: right; margin-left: 5px; } button.accordion.active:after { content: "\2212"; } div.panel { padding: 0 18px; background-color: #f98100; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; font-family: Playfair Display; } </style> <button class="accordion"> 1. What is paint protection film? </button> <div class="panel"> <p> Clear-Bra paint protection film is used to protect the integrity and beauty of your vehicle's paint finish. The 8mil (.008") clear urethane film adheres to the vulnerable painted areas of your vehicle (ie. hood, fenders, side mirrors, grille, front bumper, etc.). Saturday's primarily uses Xpel Ultimate and the new Suntek Ultra film which also comes with a 10 year warranty! </p> </div> <button class="accordion"> 2. Does it really stop rocks from chipping my paint? </button> <div class="panel"> <p> Absolutely! This product is used in many applications and was originally used to keep rocks and debris from damaging propellers on helicopters & the wings and noses of airplanes. It has been tested by engineers as well as Saturdays staff through years of experience. Of course if you hit a boulder you may be in trouble. </p> </div> <button class="accordion"> 3. What areas of my car will be covered? </button> <div class="panel"> <p> We can cover anything you'd like! From headlights, door edges, full hood or we can wrap and protect your entire car! Some vehicles have more impact areas than others. Generally we have a kit that will suit anyone's needs. From the basics all the way to full coverage. Saturdays has you covered! </p> </div> <button class="accordion"> 4. Is clearbra paint protection really invisible? </button> <div class="panel"> <p> It is very difficult to see the paint protection unless you are looking at it at the right angle under 3 feet away. Our patterns are computer cut and designed to contour to your vehicle's body lines. This will limit the amount of visible lines. Also, with full panel coverage package’s we wrap all applicable edges to reduce visible lines as much as possible. </p> </div> <button class="accordion"> 5. How long will my clearbra last? </button> <div class="panel"> <p> Our products are warrantied from 5 years to 10 years! Depending on how you treat vehicles can also play a role in how long the film will last. If you never wash your car, expect these products to not have as much shine in 5 years as a well taken care of car. We recommend washing your vehicle frequently and using liquid polymer wax on your entire vehicle at least 4 times a year. </p> </div> <button class="accordion"> 6. Do we wrap the edges? </button> <div class="panel"> <p> Of course we do! We are here to provide you with superior quality paint protection installation. A lesser shop won't do this just to save time. We wrap all leading edges where applicable. This gives you that extra protection that sets us apart. Only the best here! </p> </div> <button class="accordion"> 7. Do we polish and/or clay bar before installation? </button> <div class="panel"> <p> You betcha. We always want the paint perfect as possible before applying the paint protection. This process takes a little longer but it's definitely worth it. With no surface contaminates, your clear-bra paint protection will come out virtually perfect and "glass worthy". </p> </div> <button class="accordion"> 8. How long does installation take? </button> <div class="panel"> <p> Installation times will depend upon the complexity of the vehicle and the coverage you choose. This can take anywhere from 2 hours for the simplest kit to 72 hours for more complex or custom installations. We will be able to give you an accurate estimate when we know what coverage you decide on.. </p> </div> <button class="accordion"> 9. Do I need to do anything special to maintain my clear bra? </button> <div class="panel"> <p> There is nothing special to maintaining a clear bra. Wash and wax your vehicle as you always have, but stay away from paste waxes. These can leave a residue along the edges of the film and some colored paste waxes can actually dye the film over time. Stick with a liquid polymer wax when possible. </p> </div> <button class="accordion"> 10. Do you use a plotter to cut patterns? </button> <div class="panel"> <p> In the recent years plotters have become the new way to create patterns for cars. We offer both industry leading Xpel “computer cut” patterns as well as "hand cut" patterns for those custom jobs that other shops just can't handle. Whatever your needs are, we've got you covered. </p> </div> <script> var acc = document.getElementsByClassName("accordion"); for (var i = 0; i < acc.length; i++) { acc.addEventListener("click", accordion); } function accordion() { // Reset all of the elements for(var i = 0; i < acc.length; i++) { acc.classList.remove("active"); acc.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'; } </script>

I'm trying to work my way around to a combination of PHP and JavaScript forms processing, and I'd like to change the label of an accordion tab after that portion of the form has been processed. Since some containers have more complex calculations to make than others, I thought it would look stylistically pleasing to see the results as the containter label, much in the same way an select input looks after choosing an entry in the drop down list. Is this possible?

After letting a project age well, I'm looking at modernizing my code. The project takes the data input all year long at several different events and builds a 'league scoreboard' of them. The code goes back as far as 2002 in the oldest parts and the last major update to the code was in '07 even if CSS was added by someone else in '14. I have not worked with CSS before, and had a helper apply it to the PHP pages I coded way back when, but they were using a HTML4 subset that I would consider 'less than easily human readable'. My helper dropped out and I found myself looking at W3.css to learn what about what had changed in the ten years or so since I worked actively on this codebase, in order to pick up what they had started and migrate to something that I could maintain alongside my code. It was also decided to try and code parts of the project specifically for mobile use first. (/backstory) After playing around with W3.css I came up with a HTML template of what I'd like to get working. http://scaikeqc.org/sandbox/tf-03.html. It needs polishing, and some refinements, but its close to what I want for the mobile experience. Please note, there are no FORM tags in that page so the selects and inputs are for show only. I tried making a proper form of it, http://scaikeqc.org/sandbox/tf-03.php and it was a right mess. Every time you click on the accordion labels to expand them, the form submits, the script reloads, hilarity ensues. This introduces trash into the resultset and before I remembered to use the action tag on the form element, I crashed the GET. Is it possible to have a whole-page form broken into accordion segments? Here is a snip of the-03.php <form class="w3-form" method="post" action="<?php echo $_SERVER[PHP_SELF]?>"> <div class="w3-accordion w3-light-grey"> <button onclick="feif('Rider')" class="w3-btn-block w3-centered"> Open Rider Selection </button> <div id="Rider" class="w3-accordion-content w3-container w3-red"> <H2>Select the Rider</H2> <SELECT class="w3-select" NAME="Pname"> <?PHP IF (isset($Pname)){ printf("<OPTION VALUE=\"%s\">RiderID: %s\n", $Pname, $Pname); } else { echo "<OPTION VALUE=\"XXX\">Select Rider<OPTION VALUE=\"XXX\">-----\n"; echo "<OPTION VALUE=\"NEW\">**NEW RIDER**\n"; } ?> <OPTION VALUE="XXX">----- <OPTION VALUE="306">Johanna <OPTION VALUE="83">Aaron MacGregor <!-- 465 additional select items omitted for brevity--> <OPTION VALUE="421">Zinaida Orshima <OPTION VALUE="114">Zuriel Nightshade <OPTION VALUE="XXX">-----<OPTION VALUE="NEW">**NEW RIDER** </SELECT> </div> <button onclick="feif('Horse')" class="w3-btn-block w3-centered"> Open Horse Selection </button> <div id="Horse" class="w3-accordion-content w3-container w3-red"> <H2>Select the Horse</H2> <SELECT class="w3-select" NAME="Hname"> <?PHP IF (isset($Hname)){ printf("<OPTION VALUE=\"%s\">HorseID:%s\n", $Hname, $Hname); } else { echo "<OPTION VALUE=\"XXX\">Select Horse<OPTION VALUE=\"XXX\">-----\n"; echo "<OPTION VALUE=\"NEW\">**NEW Horse**\n"; } ?> <OPTION VALUE="12">Unknown Mount <OPTION VALUE="XXX">----- <OPTION VALUE="103">Ace <!-- 380 additional select items omitted for brevity--> <OPTION VALUE="236">Zeus' Dream <OPTION VALUE="280">Zia <OPTION VALUE="XXX">-----<OPTION VALUE="NEW">**NEW HORSE** </SELECT> </div> The form continues through five more containers I've not copied here. <input type="submit"> </FORM> <script> function feif(id) { var x = document.getElementById(id); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> I have a proof-of-concept form that does work(no accordions or data validation, data entered is not retained). This one checks an events database to see which of the five games are being played and only displays the data entry containers for the games that are being run. This is why I wanted to containerize the different sections of data entry. You can poke at that form here http://scaikeqc.org/sandbox/tf-05.php. If you've gotten this far in my post, please accept my thanks for seeing it through, and my apologies for less than beautified code. I'm recycling a lot of the form code from the previous version and haven't had the time to polish non-working code.

I was reading the tutorial for creating an accordion here: http://www.w3schools.com/howto/howto_js_accordion.asp Does anyone know how I could add this accordion or something similar to the mobile view of a responsive menu. I want to add it only when there is a 'submenu'. The code I currently have is (index.html): <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Resposive Multi Level Horizontal Nav?</title> <!--nav styles--> <style> .show { display: block; } nav { width: 100%; float: left; font-family: 'Oswald', sans-serif; font-size: 100%; color: #252525; border-bottom: 4px solid #0069d4; border-top: 4px solid #0069d4; background-color: #fff; } ul { list-style: none; margin: 0; padding: 0; } li { display: inline-block; position: relative; } a { text-decoration: none; color: #fff; } li a { height: 60px; line-height: 60px; background-color: #fff; width: 120px; text-align: center; color: #252525; display: block; } li a:hover { background-color: #0069d4; color: #fff; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } /* submenu desktop */ ul.submenu { position:absolute; top:100%; display:none; } ul.submenu li { display:block; } ul.submenu li a { display:block; float:none; font-size: 100%; line-height:40px; height:auto; } ul li:hover ul.submenu { display:block; } /* open close mobile nav*/ #i-nav { display: none; float: right; padding: 20px 20px; } .expand_sub { display: none; float: right; } @media (max-width: 1024px) { nav { width: 100%; padding: 0; margin: 0; } ul li { display:block; } ul { width: 100%; display: none; } li a { width: 100%; text-align: center; float: left; } #i-nav { display: block; } .expand_sub { display: block; } ul.submenu { position:relative; top:0%; display:block; } ul.submenu li { display:block; } ul.submenu li a { width: 100%; float: left; } } </style> <!--google fonts--> <link href='https://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'> <!--font awesome--> <link href="font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css" /> </head> <body> <nav> <div><a id="i-nav" href="#"><i class="fa fa-bars fa-2x" aria-hidden="true" style="color:#0069d4;"></i></a></div> <ul id="menu"> <li><a href="#">HOMEPAGE</a><li> <li><a href="#">PROGRAMS</a> <ul class="submenu"> <li><a href="#">Program 1</a></li> <li><a href="#">Program 2</a></li> <li><a href="#">Program 3</a></li> </ul> </li> <li><a href="#">MEMBERSHIP</a><li> <li><a href="#">NEWS</a><li> <li><a href="#">GALLERY</a><li> <li><a href="#">CONTACT</a><li> </ul> </nav> <!-- jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <!-- script to toggle mobile menu --> <script> $(document).ready(function(){ $('#i-nav').click(function(){ $('#menu').toggleClass('show'); }); }); </script> </body> </html>

How do I make sections of the accordion collapse when I open another so that there is only ever one section opened at a time? I am using the following code: <!DOCTYPE html> <html> <head> <style> button.accordion { background-color: #fffff; color: #093479; cursor: pointer; padding: 18px; width: 100%; border: show; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } button.accordion.active, button.accordion:hover { background-color: #949C57; } div.panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: 0.6s ease-in-out; opacity: 0; } div.panel.show { opacity: 1; max-height: 500px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */ } button.accordion:after { content: '\02795'; /* Unicode character for "plus" sign (+) */ font-size: 13px; color: #093479; float: right; margin-left: 5px; } button.accordion.active:after { content: "\2796"; /* Unicode character for "minus" sign (-) */ } </style> </head> <body> <button class="accordion">Self-Managed Super Funds</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Business Accounting and Tax Returns</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Taxation</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Tax Effective Structures and Asset Protection</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Individual Tax Returns</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Business Activity Statements</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">MYOB Support</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Family Trusts</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc.onclick = function(){ this.classList.toggle("active"); this.nextElementSibling.classList.toggle("show"); } } </script> </body> </html>

Hello, I have created accordion left menu where first level is clickable and appearing a slide down tree menu. The accordion menu is rolling to the left where is appearing just icons. I want in this position to not display a tree menu after click on an icon but to unroll whole menu to default position.Files are in attachement. Can you help me with this please? Thank you. accordion-menu.zip