You are not logged in!
Login Link

Accordion Spoiler

Label One
Content one
Label Two
Content two
Label Three
Content three
Label Four
Content four
 
 
[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]
 
  Please note the space between / * this allows the CSS comments to show here in the code block. If you want to keep the comments you must remove this space or it will break you CSS!  
/ * 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;
}
  Original and really cool Accordian Spoiler code by User51  
Spoiler Alert: You can Accordion Spoilers
Generic article | May 12, 2021

A slightly different take on accordions, this uses the spoiler BBCode tag inside a custom container to display an accordion control. The benefit to using spoilers is the open and collapse feature does not require a page reload.

 
Turn Spoilers into Accordions with this One Weird Trick
Generic article | May 12, 2021

Make your spoilers look like an accordion control with nothing but a little BBCode and some CSS styles.

 
Awfully Abominable Accordions for the Star-Crossed
Generic article | May 12, 2021

Use a container and headings 1-5 to create a CSS-Only accordion control. Accordions can help display a lot of information in a small space.


Comments

Please Login in order to comment!
Powered by World Anvil