Jump to content

Search the Community

Showing results for tags 'accordian'.

More search options

  • 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 2 results

  1. Hi I have used the accordian script/code that I found on the site, but I cant get it to work. I have alle the panes set, I have all the text in place, but I can only choose from having all the panes open or closed. I can see that my panes registers a click, when I click plus. The URL is: http://access.aposave.com/Aposave-nyt-site/aposave-faq/ Anyone knows what to do?
  2. On a webpage I'm building the client likes his buttons to be formated with the following - <button class="w3-btn w3-left-align w3-aqua w3-border w3-border-indigo w3-round-xxlarge w3-small" onclick="myFunction('a')">Answer</button> <div id="a" class="w3-container w3-hide w3-left-align w3-aqua w3-border w3-border-indigo w3-round-xxlarge w3-small" style="width:65%;">orange</div> Problem is he wants different colors on different pages, and many of them. So in the future changing the colors will be a major drag. Using all those selectors like that defeats the purpose of the css, right? So I am working on making a selector that contains all the details of the w3-btn w3-left-align w3-aqua w3-border etc etc. I have searched the w3-css style sheet version 3 for all relevant attibutes and have come up with this - .BtnShowAnswerPink { border:none; display:block; outline:0; padding:6px 16px; vertical-align:middle; overflow:hidden; text-decoration:none!important; text-align:center; cursor:pointer; white-space:nowrap; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; box-shadow:none; float:left; width:100%; -webkit-transition:background-color .25s,color .15s,box-shadow .25s,opacity 0.25s,filter 0.25s,border 0.15s; transition:background-color .25s,color .15s,box-shadow .15s,opacity .25s,filter .25s,border .15s; color:#000!important; background-color:#ff9999!important; border:1px solid #ccc!important; border-color:#ff3333!important; border-radius:32px; font-size:12px!important; } .BtnHideAnswerPink { padding:0.01em 16px; display:none!important; color:#000!important; background-color:#ff9999!important; border:1px solid #ccc!important; border-color:#f44336!important; border-radius:32px; font-size:12px!important; } Problem is it doesn't actually work. The button does not expand to show the text. After much more experimenting I have found that the first part, .BtnShowAnswerPink, is ok, the problem is in the second section. What is happening is the button does not expand. I have verified the javascript, and it is fine. So, at this time, this is what I have working - <li>D: _____, I'm Donna.<button onclick="myFunction('a')" class="BtnShowAnswerPink">Answer</button> <div id="a" class="w3-container w3-hide w3-left-align w3-pink w3-border w3-border-red w3-round-xxlarge w3-small" style="width:65%;"> Hi (Hello), I'm Donna. </div> </li> The javascript also comes from this site, here it is: <script> function myFunction(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> What am I missing from the second part, .BtnHideAnswerPink? I can't provide a link to the site as it is not published, yet. Thanks.
  • Create New...