Jump to content

Search the Community

Showing results for tags 'Accordion'.

The search index is currently processing. Current results may not be complete.
  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 20 results

  1. 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('drop
  2. 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
  3. 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
  4. 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).on
  5. 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-wei
  6. 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!
  7. 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") { pa
  8. 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
  9. 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?
  10. 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++
  11. Is there any complete W3.JS solution for Tabs, Accordions, SlideShows etc?
  12. harry_ord

    CSS accordion

    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
  13. 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/
  14. 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
  15. 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: Playf
  16. 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
  17. 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?
  18. 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 {
  19. 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: whi
  20. 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
  • Create New...