toggle - Text based game with hide/show text (Yes/No)

Question

I'm not a coder but I'm trying to figure out how to create a website for the manifesto of play. The Idea is that when you read the manifesto you can play it by selecting yes-no and showing hidden section and going to it with an anchor link, with multiple steps.

https://manifestodelgioco.it

<p>
Do you want to play?
</p>

<a href="#iwanttoplay" class="js-toggle-visibility" data-toggle="iwanttoplay">Yes</a>

<a href="#idontwanttoplay" data-toggle="idontwanttoplay" class="js-toggle-visibility">No</a>

<div class="nascosto" id="iwanttoplay">I want to play</div>

<div class="nascosto" id="idontwanttoplay">Bye Bye</div>

Scritp

$(document).on('click', '.js-toggle-visibility', function(e) {
    e.preventDefault();
  var $divToToggle = $('#' + $(this).data('toggle'))[0];
  setTimeout(function() {
    if ($divToToggle.style.display == 'block') {
      $divToToggle.style.display = 'none';
    } else {
      $divToToggle.style.display = 'block'
    }
  })
})

css

.nascosto {
  display:none;
}

This seems to work: https://jsfiddle.net/6ze7s3ax/1/

The problem that I have is that on the theme I'm using on Wordpress I'm not able to associate the data-toggle="xx" to the button neither in the html.

Is there a possibility to edit this script to be able to use a class or id instead of the data toggle to have the same functionality?

Thanks

question from:https://stackoverflow.com/questions/65900802/text-based-game-with-hide-show-text-yes-no

Answer 1

Waitting for answers