2

tengo un código que está diseñado para crear un botón que al darle click se muestre la información/texto que anteriormente le había asignado.

He aquí el código:

<div id="spoiler" style="display: none;">
Aquí escribe lo que no quieras que se lea hasta que den al botón
</div>
<button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" title="Click to show/hide" type="button" class="btn">Ver información </button> 

El problema es que al añadirlo al código html de mi WordPress no me sale. Simplemente se reemplaza por este otro código:

<div id="spoiler" style="display: none;">Aquí escribe lo que no quieras que se lea hasta que den al botón</div>
<button class="btn" title="Click to show/hide" type="button">Ver información </button>

¿Alguna idea de cómo puedo solucionarlo?

Gracias.

2
  • ¿Tienes que poner el código en el onclick? ¿Puedes ponerlo en un script por separado (y luego asociarlo por separado)?
    – Alvaro Montoro
    Commented el 5 mar. 2019 a las 20:37
  • Gracias por señalarlo. Pero... ¿cómo hago eso?
    – Toni521
    Commented el 5 mar. 2019 a las 23:56

2 respuestas 2

3

Si WordPress quita el atributo onClick, una cosa que puedes hacer en ese caso es mover el controlador del evento click fuera usando addEventListener por ejemplo. Algo como esto:

document.querySelector(".btn").addEventListener("click", function() {
  if (document.getElementById('spoiler').style.display == 'none') {
    document.getElementById('spoiler').style.display = ''
  } else {
    document.getElementById('spoiler').style.display = 'none'
  }
});
<div id="spoiler" style="display: none;">
  Aquí escribe lo que no quieras que se lea hasta que den al botón
</div>
<button title="Click to show/hide" type="button" class="btn">Ver información </button>

Yo he usado la clase btn, pero esa puede ser demasiado genérica, deberías añadir una clase más específica (o un id) al botón para que el controlador de evento sólo se asocie a él y no a otros elementos.

1

Variación de https://es.stackoverflow.com/a/187565/81450 Sólo CSS + HTML.

<style>
  .btn {
    cursor: pointer;
    background-color: #ccf;
  }
  /* el spoiler comienza oculto */
  .complete {
    display: none;
  }
  /* el checkbox también oculto */
  input.showmore {
    display: none;
  }
  /* si el checkbox está checked mostrar spoiler */
  input.showmore:checked+.complete {
    display: block;
  }
  /* si el checkbox está checked ocultar label botón */
  input.showmore:checked~label.btn {
    display: none;
  }
</style>
<input type=checkbox id=vermas class=showmore />
<div class=complete>Aquí escribe lo que no quieras que se lea hasta que den al botón</div>
<label for=vermas class="btn" title="Click to show/hide">Ver información</label>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.