Accordion Spoiler

 
[container:accordian_spoiler]
 [container: slot_first]
  [spoiler]Content one|Label One[/spoiler]
 [/container]
 [container: slot]
  [spoiler]Content two|Label Two[/spoiler]
 [/container]
 [container: slot]
  [spoiler]Content three|Label Three[/spoiler]
 [/container]
 [container: slot_last]
  [spoiler]Content four|Label Four[/spoiler]
 [/container]
[/container]
 

/ * container to help with targeting */
.user-css .accordian_spoiler {
 line-height:1;
 width:70%;
}
 
/ * word on the buttons for each spoiler - these become the accordion headings */
.user-css .accordian_spoiler a.spoiler-button {
 display: block; 
 margin: 0;
 border-radius: 0px;
 border: 1px solid #3E9C92;
 background-color: #2F4F4C;
 border-bottom: none;
 font-weight: bold;
}
 
/ * The first heading ... */
.user-css .accordian_spoiler .slot_first a.spoiler-button {
 border-top-right-radius: 10px;
 border-top-left-radius: 10px;
}
 
/ * The last heading ... on load */
.user-css .accordian_spoiler .slot_last a.spoiler-button {
 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;
}
 
/ * The last heading ... focus or open */
.user-css .accordian_spoiler .slot_last a.spoiler-button:focus {
 border-bottom-right-radius: 0px;
 border-bottom-left-radius: 0px;
}
 
/ * ...and the last one, when collapsed again */
.user-css .accordian_spoiler .slot_last a.spoiler-button.collapsed {
 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;
}
 
/ * the panel content, hidden on page load */
.user-css .accordian_spoiler .spoiler-content {
 margin: 0px !important;
 border-radius: 0px !important;
 border: 1px solid #3E9C92;
 border-top: none;
}
 
/ * fix the bottom corners of the last panel */
.user-css .accordian_spoiler .slot_last .spoiler-container .spoiler-content {
 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;
}