Tengo este código que uso en una aplicación llamada Anki , que es una aplicación de tarjetas que me ayuda a recordar nuevas palabras. Tengo este código que escribe un texto cuando hago clic en él, muestra el contenido del campo de sugerencia que agregué al agregar la nueva tarjeta,
{{#Hint}} <div id="hint" class="hidden"> <p class="trigger">[ click to show hint ]</p> <p class="payload">{{Hint}}</p> </div> <script> var hint = document.getElementById('hint'); hint.addEventListener('click', function() { this.setAttribute('class', 'shown'); }); </script> {{/Hint}}Todo lo que quiero es escribir la función de ese texto de arriba en el botón con un estilo como este código, por ejemplo.
<!DOCTYPE html> <html> <head> <style> .button { border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } .button1 {background-color: #4CAF50;} /* Green */ </style> </head> <body> <button class="button button1">Green</button> </body> </html>Y quiero que cuando presione el botón por primera vez, me muestre el contenido del campo de pista, y cuando lo presione por segunda vez, lo oculte, y así sucesivamente...
Gracias por adelantado
Con su aporte de estilo e idea general, es agregar una pequeña parte de js a su script.
En relación a lo dicho por @munleashed, también podría ser usado por evento onclick .
var hint = document.getElementById('hint'); function hide() { hint.classList.toggle('shown'); } .button { border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } .button1 { background-color: #4CAF50; } #hint .payload { display: none; } #hint.shown .payload { display: block; } <div id="hint" class="hidden"> <button class="button button1" onclick="hide()">[ TOUCH ]</button> <p class="payload">SOME HINT HERE</p> </div> <!-- <button class="button button1" onclick="hide()">[ TOUCH ]</button> <div id="hint" class="hidden"> <p class="payload">SOME HINT HERE</p> </div> -->Si entendí correctamente, ¿quiere agregar y eliminar cierta clase CSS en cada clic secuencial?
En ese caso, alternar la clase hará lo siguiente:
hint.addEventListener('click', function() { hint.classList.toggle("shown"); });Y css puede ser por ejemplo algo como:
#hint .payload {display: none}; #hint.shown .payload {display: block}