Jump to content

Search the Community

Showing results for tags 'collapse'.



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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 4 results

  1. Janvdkuijl

    Close collapse menu automaticly

    Hi. I’m using the new BAND template with on mobile divices a colapsable menu. But the menu does not atomaticly close. Only when you link to an other page or touch the menu button again. But not with a link within the same page. Hoe can i make it close after the link is beiing clicked? site is pure css thnx Jan
  2. harry_ord

    Change icon color on collapsible menu

    I found this collapsible menu: http://codepen.io/joaorafaelm/pen/pbjfi I want to change the color of the 3 icon bars of the button but i'm not able to do it, i just want them white. I tried this and only changed the third bar: label:before{ background:#fff; }
  3. 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>
  4. trecon

    Collapsing Borders IE10

    Hey Folks,I've got an issue concerning collapsing borders in table rows especially using the IE10. I’m trying to build an timetable. So there are td boarders which are overlapping the table row borders.My CSS looks like this tdContent{ background-color: #00A9EC; vertical-align:top; border: solid black 1px; border-collapse: collapse; cursor: pointer;} The difference between IE10 and all other browser is attached...Just noticed that it is not a only IE10 issue it also accurse on IE9 Anybody an Idea to get this thing done ?Greetz and Thanks in forcast ;-)Spanky
×