View source for User:Tsutomu25/sandbox/Cover3

<includeonly><span id="spoiler-box-{{{1}}}"><span class="button-container-{{{1}}}">[[#spoiler-target-{{{1}}}|<span id="show-button-{{{1}}}" class="button-{{{1}}}">Show Spoilers</span>]]</span><span class="button-container-{{{1}}}">[[#null|<span id="hide-button-{{{1}}}" class="button-{{{1}}}">Hide Spoilers</span>]]</span><span id="spoiler-target-{{{1}}}"></span><span id="spoiler-text-{{{1}}}">{{{2}}}</span></span>
{{code
|css=
/* Styles for the spoiler box */
#spoiler-box-{{{1}}}{
 position: relative;
 background-color: #909199;
 transition: 0.3s ease-in;
 cursor: pointer;
}
#spoiler-box-{{{1}}}::before{
 content: ' ';
 display: inline-block;
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0%;
 left: 0%;
 z-index: 1;
}

/* Styles for the containers of buttons */
.button-container-{{{1}}}{
 position: absolute;
 bottom: 100%;
 left: 50%;
 transform: translate(-50%, 3px);
 display: inline-block;
 width: auto;
 height: auto;
 padding-bottom: 7px;
 transition: 0.3s ease-in;
 visibility: hidden;
 opacity: 0;
 z-index: 0;
 -webkit-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

/* Styles for the buttons */
.button-{{{1}}}{
 display: flex;
 justify-content: center;
 align-items: center;
 width: auto;
 height: auto;
 padding: 3px 7px;
 background-color: white;
 border-radius: 4px;
 filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
 text-wrap: nowrap;
 text-decoration: none;
 color: black;
}
#spoiler-box-{{{1}}} .button-container-{{{1}}} a:hover{
 text-decoration: none;
}
#spoiler-box-{{{1}}}:hover .button-container-{{{1}}}:has(#show-button-{{{1}}}){    
 visibility: visible;
 opacity: 1;
 transform: translate(-50%, 0);
 z-index: 5;
}
#spoiler-box-{{{1}}}:hover .button-container-{{{1}}}:has(#hide-button-{{{1}}}){
 transform: translate(-50%, 0);
}

/* Hiding the target div */
#spoiler-target-{{{1}}}{
 display: none;
}

/* Styles to hide the spoiler text */
#spoiler-text-{{{1}}}{
 opacity: 0;
 transition: 0.3s ease-in;
 -webkit-user-select: none; /* Safari */
 -ms-user-select: none; /* IE 10 and IE 11 */
 user-select: none; /* Standard syntax */
}

/* Styles to reveal the spoiler text */
#spoiler-box-{{{1}}}:hover{
 background-color: #70717a;
}
#spoiler-box-{{{1}}}:has(#spoiler-target-{{{1}}}:target){
 background-color: #e3e3e5;
}
#spoiler-box-{{{1}}}:has(#spoiler-target-{{{1}}}:target)::before{
 display: none;
}
#spoiler-target-{{{1}}}:target ~ #spoiler-text-{{{1}}}{
 opacity: 1;
 -webkit-user-select: text;
 -ms-user-select: text;
 user-select: text;
}

/* Styles to hide the show button and reveal the hide button */
#spoiler-box-{{{1}}}:hover:has(#spoiler-target-{{{1}}}:target) .button-container-{{{1}}}:has(#show-button-{{{1}}}){
 visibility: hidden;
 opacity: 0;
 z-index: 0;
}
#spoiler-box-{{{1}}}:hover:has(#spoiler-target-{{{1}}}:target) .button-container-{{{1}}}:has(#hide-button-{{{1}}}){
 visibility: visible;
 opacity: 1;
 z-index: 5;
}
}}
</includeonly><noinclude>
It hides the given input of spoiler text and reveals them when the user clicks on them. It takes two values. One is the name of the spoiler and another one is the actual spoiler text. Every time the template is used, every element has to have a unique id and class. Hence spoiler name is required. 

== Usage ==
The following is a list of required parameters:
<pre>
{{User:Tsutomu25/sandbox/Cover3|<spoiler name>|<spoiler text>}}
</pre>

== Limitations ==
* When the template is used multiple times on the same page, only one spoiler can remain visible at a time. If the user reveals another spoiler, the previously opened one will automatically be hidden.
* If the page is refreshed while a spoiler is revealed, that spoiler will remain open even after the page reloads.

== Examples==
Result: {{User:Tsutomu25/sandbox/Cover3|weapon|The weapon is Knife}}
Result: {{User:Tsutomu25/sandbox/Cover3|motive|The culprit wore {{font color|#ffa500|Orange}} clothes}}
Result: {{User:Tsutomu25/sandbox/Cover3|culprit|The culprit is [[Gosho Aoyama]]}}

[[Category:Templates]]
</noinclude>