W3.CSS Accordions







googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); });



W3.CSS Accordions




❮ Previous
Next ❯


Click on the "Open Section" buttons below to see how accordions work:





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.






Link 1
Link 2
Link 3




Accordion with Images:


Alps

French Alps





Accordion


An accordion is used to show (and hide) HTML content.


Use the w3-hide class to hide the accordion content.


Use any kind of button to open and close the content:



Example



<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Open Section 1</button>

<div id="Demo1" class="w3-container
w3-hide">
 
<p>Some text..</p>
</div>

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


Try it Yourself »




Both the element that is used to open the accordion and the accordion's
content can be any HTML element.




Accordion vs. Dropdown


This table shows the difference between an accordion and a dropdown:



















AccordionDropdown
Content pushes the page content downContent lays over existing the page content
Content is often 100% wideContent is 160px wide (default)
Often used to open multiple sectionsOften used to open one section



Accordions




Link 1
Link 2
Link 3




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.







Dropdowns





Link 1
Link 2
Link 3





/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
var x = document.getElementById("myDropdown");
if (x.classList) {
x.classList.toggle("w3-show");
} else {
// Fallback for IE9
var classes = x.className.split(" ");
var i = classes.indexOf("w3-show");

if (i >= 0)
classes.splice(i, 1);
else
classes.push("w3-show");
x.className = classes.join(" ");
}
}









googletag.cmd.push(function() { googletag.display('div-gpt-ad-1493883843099-0'); });





Accordion Buttons


You can use any HTML element to open the accordion content. We prefer a button with a
w3-block class, to span the entire width of the page (100%
width).


Remember that buttons in W3.CSS are centered by default. Use the w3-left-align class if you want
them left-aligned instead. However, you do not have to follow our approach - an accordion will look good either way:





Lorem ipsum...





Lorem ipsum...





Centered content as well!





Example



<button onclick="myFunc('Demo1')"
class="w3-button">
Normal button</button>

<div id="Demo1" class="w3-hide">
  <p>Lorem ipsum...</p>
</div>

<button onclick="myFunc('Demo2')" class="w3-button w3-block w3-left-align
w3-green">
Left aligned and full-width</button>

<div id="Demo2" class="w3-hide">
  <p>Lorem ipsum...</p>
</div>

<button onclick="myFunc('Demo3')" class="w3-btn w3-block
w3-red">
Centered and full-width</button>

<div id="Demo3"
class="w3-hide w3-center">
 
<p>Centered content as well!</p>
</div>


Try it Yourself »




Active Accordion Buttons


Use JavaScript to highlight accordions that are open (clicked on):




Some text..





Some other text..





function myFuncx(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className =
x.previousElementSibling.className.replace("w3-black", "w3-red");
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace("w3-red", "w3-black");
}}

Example



// Add the w3-red class to all opened accordions
var x =
document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
 
x.className += " w3-show";
  x.previousElementSibling.className += "
w3-red";
} else {
  x.className = x.className.replace("w3-show",
"");
  x.previousElementSibling.className =

  x.previousElementSibling.className.replace("w3-red", "");
}


Try it Yourself »




Accordion Width


By default, the width of block is 100%. To override this, change the
CSS width property of the accordion container:





Some text..







Some text..







Some text..







Some text..






Example



<div class="w3-light-grey" style="width:50%">
  <button onclick="myFunction('Demo1')"
class="w3-button w3-block">
    50%
 
</button>
  <div id="Demo1" class="w3-hide">
    <p>Some text..</p>
  </div>
</div>


Try it Yourself »




Accordion Content


Accordion with links:




Link 1
Link 2
Link 3




Example



<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Accordion</button>

<div id="Demo1" class="w3-hide">
 
<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>


Try it Yourself »




Accordion as a List:




  • Jill

  • Eve

  • Adam





Example



<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Accordion</button>

<div id="Demo1" class="w3-hide">
  <ul class="w3-ul">
    <li>Jill</li>
   
<li>Eve</li>
    <li>Adam</li>
 
</ul>
</div>


Try it Yourself »




Accordion inside a Sidebar (You will learn more about sidebars later):




Example



<div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:200px;">
 
<a href="#" class="w3-bar-item w3-button">Link 1</a>
 
<a href="#" class="w3-bar-item w3-button" onclick="myAccFunc()">Accordion</a>
  <div
id="demoAcc" class="w3-hide">
   
<a href="#" class="w3-bar-item w3-button">Link</a>
    <a href="#"
class="w3-bar-item w3-button">Link</a>
  </div>
  <div class="w3-dropdown-click">
   
<a href="#" class="w3-bar-item w3-button" onclick="myDropFunc()">Dropdown</a>
    <div
id="demoDrop" class="w3-dropdown-content">
     
<a href="#" class="w3-bar-item w3-button">Link</a>
      <a href="#"
class="w3-bar-item w3-button">Link</a>
   
</div>
  </div>
  <a href="#" class="w3-bar-item
w3-button">Link 2</a>
  <a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div>


Try it Yourself »




Animated Accordions


Use any of the w3-animate-classes to fade, zoom or slide in the accordion content:





Link 1
Link 2
Link 3




Example



<div id="Demo1" class="w3-hide
w3-animate-zoom">


Try it Yourself »






var mybtn = document.getElementsByClassName("testbtn");
var i;
for (i = 0; i < mybtn.length; i++) {
mybtn[i].click();
}

function myFunct(id) {
var x = document.getElementById(id);
if (x.classList) {
x.classList.toggle("w3-show");
x.previousElementSibling.classList.toggle("w3-dark-grey");
} else {
// Fallback for IE9 and earlier
if (x.className.indexOf("w3-show") == -1)
x.className = x.className + " w3-show";
else
x.className = x.className.replace("w3-show", "");
}
}


function myFunc(id) {
var x = document.getElementById(id);
if (x.classList) {
x.classList.toggle("w3-show");
} else {
// Fallback for IE9 and earlier
if (x.className.indexOf("w3-show") == -1)
x.className = x.className + " w3-show";
else
x.className = x.className.replace("w3-show", "");
}
}


❮ Previous
Next ❯

-

Popular posts from this blog

Colors HSL

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Colors HSL ❮ Previous Next ❯ HSL Calculator   rgb(255, 0, 0) #ff0000 H: S: L: HSL Colors HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+. HSL stands for hue, saturation, and lightness. HSL color values are specified with: hsl( hue , saturation , lightness ) . Hue Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue. Saturation Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness Lightness is also a percentage; 0% is black, 100% is white. function submitOnEnter(e) { keyboardKey = e.which || e.keyCode; if (keyboardKey == 13) { setFullColor(); } } function clickHue(hue) { var h = document.getElementById("hue01"); h.v...
Read more

W3.CSS Downloads

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> W3.CSS Downloads ❮ Previous Next ❯ Download W3.CSS Download W3.CSS from this link: https://www.w3schools.com/w3css/4/w3.css W3.CSS is Free W3.CSS is free to use. No license is necessary. How To use W3.CSS To use W3.CSS, just add a link to "w3.css" in your web pages: Example <!DOCTYPE html> <html> <title>My Web</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> Try It Yourself » Or download w3.css and run it from your own web site: Example <!DOCTYPE html> <html> <title>My Web</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="w3.css"> If you put w3....
Read more

W3.CSS Tables

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> W3.CSS Tables ❮ Previous Next ❯ First Name Last Name Points Jill Smith 50 Eve Jackson 94 Adam Johnson 67 Bo Nilsson 50 Mike Ross 35 W3.CSS Table Classes W3.CSS provides the following classes for tables: Class Defines w3-table Container for an HTML table w3-striped Striped table w3-border Bordered table w3-bordered Bordered lines w3-centered Centered table content w3-hoverable Hoverable table w3-table-all All properties set Basic Table The w3-table class is used to display a basic table: First Name Last Name Points Jill Smith 50 Eve Jackson 94 Adam Johnson 67 Example <table class="w3-table"> <tr>   <th>First Name</th>   <th>Last Name</th>   <th>Points</th> </tr> <tr>   <td>Jill</td>   <td>Smith</td>   <td>50</...
Read more