Spoilers

Spoilers allow you to hide specific information within sentences, only showing it if the reader clicks a certain button requesting to see. This is obviously valuable if the text contains a “spoiler” that the reader would only want to see if they are already in the know, but can be used in other contexts, too, such as to include bonus information for readers who want to dig deeper without cluttering up the page.

Example

HTML

<!--Provide unique input 'id' and label 'for' attributes to make multiple spoilers work properly. -->
<div class="stk-snippets-inline-spoiler stk-container" data-ce-tag="container" data-container-name="Spoiler paragraph">
  <p class="stk-reset stk-theme_00000__mb_0">The <strong class="stk-reset">Solomon R. Guggenheim Museum</strong>, often referred to as The Guggenheim, is an art museum located at 1071 Fifth Avenue on the corner of East 89th Street in the Upper East Side neighborhood of Manhattan, New York City. It is the permanent home of a continuously expanding collection of Impressionist, Post-Impressionist, early Modern, and contemporary art and also features special exhibitions throughout the year. The museum was established by the Solomon R. Guggenheim Foundation in 1939 as the Museum of Non-Objective Painting, under the guidance of its first director, Hilla von Rebay.</p>
  <input id="trigger-spoiler-01" class="stk-snippets-inline-spoiler__input" type="checkbox">
  <p class="stk-snippets-inline-spoiler__content stk-reset stk-theme_00000__mb_0">It adopted its current name after the death of its founder Solomon R. Guggenheim in 1952.</p>
  <label class="stk-snippets-inline-spoiler__trigger" for="trigger-spoiler-01" data-ce-tag="container" data-container-name="Spoiler trigger"></label>
</div>
<p class="stk-reset"></p>

CSS

.stk-snippets-inline-spoiler {
  margin-bottom: var(--theme-bottom-indent);
}

.stk-snippets-inline-spoiler > :last-child {
  margin-bottom: 0;
}

/* Trigger style */
.stk-snippets-inline-spoiler__trigger:not(.ce-element) {
  display: inline-block !important;
  height: 1.2em;
  width: 1.2em;
  margin-left: 0.2em;
  margin-bottom: -0.2em;
  vertical-align: baseline;
  cursor: pointer !important;
  background: url("data:image/svg+xml,%3Csvg width='23' height='23' viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11.5' cy='11.5' r='11.5' fill='%23B2B5BA'/%3E%3Ccircle cx='5.5' cy='11.5' r='1.5' fill='white'/%3E%3Ccircle cx='17.5' cy='11.5' r='1.5' fill='white'/%3E%3Ccircle cx='11.5' cy='11.5' r='1.5' fill='white'/%3E%3C/svg%3E%0A") center center no-repeat;
  background-size: contain;
}

/* Trigger open */
.stk-snippets-inline-spoiler__input:checked + .stk-snippets-inline-spoiler__content + .stk-snippets-inline-spoiler__trigger {
  margin-left: -1em;
  background: url("data:image/svg+xml,%3Csvg width='23' height='23' viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11.5' cy='11.5' r='11.5' fill='%23B2B5BA'/%3E%3Cpath d='M16 7L7 16' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 7L16 16' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") center center no-repeat;
  background-size: contain;
}

/* Trigger interactivity */
.stk-snippets-inline-spoiler__trigger:hover,
.stk-snippets-inline-spoiler__trigger:focus {
  transform: scale(1.1);
}

/* Spoiler styles */
.stk-snippets-inline-spoiler__content {
  padding: .2em 1em .2em .2em;
  border-radius: 4px;
  background: #F2F2F2;
}

/* Open and closed spoiler states */
.stk-snippets-inline-spoiler > *:not(.ce-element) {
  display: inline;
}

/* Hide spoiler in public by default */
.stk-snippets-inline-spoiler__content:not(.ce-element) {
  display: none;
}

/* Show spoiler on trigger triggering */
.stk-snippets-inline-spoiler__input:checked + .stk-snippets-inline-spoiler__content:not(.ce-element) {
  display: inline;
}

.stk-snippets-inline-spoiler__input {
  position: absolute;
  appearance: none;
}

Replace style id `stk-theme_00000` with yours before adding it to your Style Manager. For more info, please go to the Introduction page.

Content Experience Impact

If your information contains actual spoilers, hiding them like this can build trust with your reader because you aren’t ruining any information for them. But, regardless of how you use spoilers components, it can create a smoother reading experience by reducing text clutter, putting the most important information front and center and allowing the reader to expand the extra text only if they’re interested.

Dos

• Make it clear to the reader what spoilers are and how to use them, especially if this is a new feature for your publication. Consider explaining the feature at the top of the page, in the intro, or next to the first spoiler.

• Consider pop-up footnotes as an alternative for adding bonus information, especially when the information is long or doesn’t fit naturally within the main body text.

Don'ts

Don’t hide information that is critical to the flow of the article. Imagine a user reading the article without opening any of the spoilers—would they still be able to understand?

Learn More

Extra Inspiration