Customizable Spoiler Boxes

AmethystAndAnkh

Info

Created: 4 years, 2 months ago
Creator: AmethystAndAnkh
Favorites: 114

Profile

Information and Instructions

This is customizable, bootstrapped spoiler box code. It uses bootstrap cards for the design as that seems fitting for a spoiler box. If you're savvy with CSS/bootsrap, you can strip the design down to whatever you like. It's been edited so that free users can use it and doesn't require the CSS input area to work.

If you are unfamiliar with my code style but understand CSS and HTML well enough, please read here before continuing on. It can help you better understand my code for customizing it to your own needs or desires.

It is important to note that you can have more than one spoiler box on your page. Have as many as you like. However, each spoiler box must have its own unique "name". This means the div id and any references starting with #.

This section of code is what I mean. I'll colourfully bold the terms that must be unique to each different spoiler box you wish to have on one page.


<div class="card card-outline-danger" style="padding:10px;margin-bottom:20px;overflow:hidden;">
 <h3 class="card-inverse card-danger card-header" style="font-size:20px;padding:10px;"><a href="#spcard" data-toggle="collapse" data-target="#spcard" class="btn-block"style="color:WHITE;text-decoration:none;">spcard</a></h3>
  <div id="spcard" class="collapse">

Spoiler

HTML Code


<!--
DO NOT DELETE THIS NOTE - For more code like this, go to: https://toyhou.se/AmethystAndAnkh/characters and choose the code type that's right for you.
-->
<div class="card card-outline-danger" style="padding:10px;margin-bottom:20px;overflow:hidden;">
 <h3 class="card-inverse card-danger card-header" style="font-size:20px;padding:10px;"><a href="#spcard" data-toggle="collapse" data-target="#spcard" class="btn-block"style="color:WHITE;text-decoration:none;">spcard</a></h3>
  <div id="spcard" class="collapse">
   <div style="padding:10px;">
      Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
 </div>
</div>

Spoiler

HTML Code


<!--
DO NOT DELETE THIS NOTE - For more code like this, go to: https://toyhou.se/AmethystAndAnkh/characters and choose the code type that's right for you.
-->
<div class="card card-outline-danger" style="padding:10px;margin-bottom:20px;overflow:hidden;">
 <h3 class="card-inverse card-danger card-header" style="font-size:20px;padding:10px;"><a href="#spcard2" data-toggle="collapse" data-target="#spcard2" class="btn-block"style="color:WHITE;text-decoration:none;">spcard</a></h3>
  <div id="spcard2" class="collapse">
   <div style="padding:10px;">
  Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
 </div>
</div>

Recent Images

No images.