I want to make a spoiler function which can be used multiple times in a WordPress post

<div id="my-spoiler">

    <div id="my-spoiler-title" role="button" onclick="(document.getElementById('1').style.display=document.getElementById('1').style.display=='none' ? '' : 'none')">
        Spoiler Title
    </div>

    <div class="my-spoiler-content" id="1" style= "display:none">
        Hidden Content
    </div>

</div>

I use this code But to use this multiple times in a post, I have to create unique “id” every time like “id=1”, "id=2’…

Is there any way to call sibling div without any “id” and achieve the results.

I want to use this function for my Quiz type post. when initially answer is hidden and when user touch the spoiler title than answers is visible.

I done CSS part of this function and all things work properly if I use unique “id” for every question.

I don’t want to use any plugin or short code type plugin. Thanks in advance.

if you want to show content on click then you might want to try this…

I asked in stack overflow and found some suggestions.

[https://stackoverflow.com/questions/58239310/i-want-to-make-a-spoiler-function-which-can-be-used-multiple-times-in-a-wordpres]

Now it’s look like this

1 Like

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.