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 class="my-spoiler-content" id="1" style= "display:none">
        Hidden Content


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.


Now it’s look like this

1 Like