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


Forums

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

Calendars

  • Community Calendar

Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 1 result

  1. w3-btn and what am I doing wrong?

    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.
×