Difference between revisions of "Template:TAS Taipei/CSS"

Line 949: Line 949:
  
  
/* Style the buttons that are used to open and close the accordion panel */
+
 
 
button.accordion {
 
button.accordion {
 
     background-color: #eee;
 
     background-color: #eee;
Line 956: Line 956:
 
     padding: 18px;
 
     padding: 18px;
 
     width: 100%;
 
     width: 100%;
    text-align: left;
 
 
     border: none;
 
     border: none;
 +
    text-align: left;
 
     outline: none;
 
     outline: none;
 +
    font-size: 15px;
 
     transition: 0.4s;
 
     transition: 0.4s;
 
}
 
}
  
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
 
 
button.accordion.active, button.accordion:hover {
 
button.accordion.active, button.accordion:hover {
 
     background-color: #ddd;
 
     background-color: #ddd;
 
}
 
}
  
/* Style the accordion panel. Note: hidden by default */
+
button.accordion:after {
 +
    content: '\02795';
 +
    font-size: 13px;
 +
    color: #777;
 +
    float: right;
 +
    margin-left: 5px;
 +
}
 +
 
 +
button.accordion.active:after {
 +
    content: "\2796";
 +
}
 +
 
 
div.panel {
 
div.panel {
 
     padding: 0 18px;
 
     padding: 0 18px;
Line 976: Line 987:
 
     opacity: 0;
 
     opacity: 0;
 
}
 
}
 
/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel
 
  
 
div.panel.show {
 
div.panel.show {
 
     opacity: 1;
 
     opacity: 1;
     max-height: 500px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
+
     max-height: 500px;
}
+
 
+
button.accordion:after {
+
    content: '\02795'; /* Unicode character for "plus" sign (+) */
+
    font-size: 13px;
+
    color: #777;
+
    float: right;
+
    margin-left: 5px;
+
}
+
 
+
button.accordion.active:after {
+
    content: "\2796"; /* Unicode character for "minus" sign (-) */
+
 
}
 
}
  

Revision as of 09:04, 14 July 2016