How to create multiple spoilers without using id attributes

by

Spoilers help in hiding and displaying content according to the users need. Spoilers are also used to save space in your web page.You can easily write FAQ and terms conditions in a very small space with spoilers.
Today in this post we will tell about how to make spoilers without using id attribute. After reading this article, you will be able to make more than one spoilers without using the ‘id’ attributes.

What is spoilers and what is it used for ?

With the help of spoilers, you can create content of display and height type. And using spoilers you can also create a quiz in which you can hide the answer by default and when the user wants to see the answer, they can see the answer in just one click.

Spoiler HTML

<div class="spoiler">
<div class="spoiler-toggle">
spoiler heading
</div>
<div class="spoiler-content">
your hidden content
</div>
</div>

Spoiler Script

<script>
 var spTog = document.querySelectorAll('[class="spoiler-toggle"]');

spTog.forEach(function(toggle) {
toggle.addEventListener('click', function(event)
{
 event.target.closest('.spoiler').classList.toggle('open');
   
});
});
</script>

Spoiler CSS

<style>
.spoiler {
border: 1px solid #ccc;
    border-radius: 10px;
    background: #fff;
    color: #333;
    margin-bottom: 1.5em
}

.spoiler .spoiler-content {
    padding-top: 14px;
    padding-right: 14px;
    padding-bottom: 14px;
    padding-left: 7px;
    font-weight: bold;
}

.spoiler:not(.open) .spoiler-content {
    padding: 0;
    height: 0;
    overflow: hidden;
    
}
[class='spoiler-toggle'] {
    position: relative;
    min-height: 22px;
    line-height: 22px;
    padding: 7px 7px 7px 7px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    border-radius: 10px;
    background: #f0f0f0;
    font-size: 1em;
    cursor: pointer;
}

</style>

How to add a spoiler without using short-code based plugin in WordPress

If you are using WordPress CMS, then you can create more than one spoiler without any short code.

Step (1) :- You can use the Spoiler HTML code as many times as you want.

<div class="spoiler">
<div class="spoiler-toggle">
spoiler heading
</div>
<div class="spoiler-content">
your hidden content
</div>
</div>

Step (2) :- Apply Spoiler Script before </body> tag of the page. you can do this by directly applying in your theme or if you just need Spoiler in your few post you can also apply the Spoiler Script in post.

<script>
 var spTog = document.querySelectorAll('[class="spoiler-toggle"]');

spTog.forEach(function(toggle) {
toggle.addEventListener('click', function(event)
{
 event.target.closest('.spoiler').classList.toggle('open');
   
});
});
</script>

To apply Spoiler Script in individual post just choose Custom HTML block at the post bottom and paste Spoiler Script code.

Step (3) :- And in the final step add Spoiler CSS in your WordPress theme using additional CSS options or with the help of child theme.

<style>
.spoiler {
border: 1px solid #ccc;
    border-radius: 10px;
    background: #fff;
    color: #333;
    margin-bottom: 1.5em
}

.spoiler .spoiler-content {
    padding-top: 14px;
    padding-right: 14px;
    padding-bottom: 14px;
    padding-left: 7px;
    font-weight: bold;
}

.spoiler:not(.open) .spoiler-content {
    padding: 0;
    height: 0;
    overflow: hidden;
    
}
[class='spoiler-toggle'] {
    position: relative;
    min-height: 22px;
    line-height: 22px;
    padding: 7px 7px 7px 7px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    border-radius: 10px;
    background: #f0f0f0;
    font-size: 1em;
    cursor: pointer;
}

</style>

Leave a Comment