Use Tailwind classes to hide/show elements
All checks were successful
continuous-integration/drone/push Build is passing
continuous-integration/drone/pr Build is passing

This commit is contained in:
Basti 2021-12-16 15:18:37 +01:00
parent f1d3e3d8ec
commit 78aea5d608
Signed by untrusted user: basti
GPG Key ID: 9F88009D31D99C72
2 changed files with 9 additions and 9 deletions

View File

@ -1,4 +1,4 @@
// version 4 // version 5
@import "tailwindcss/base"; @import "tailwindcss/base";
@import "tailwindcss/components"; @import "tailwindcss/components";
@import "tailwindcss/utilities"; @import "tailwindcss/utilities";

View File

@ -29,11 +29,11 @@
</p> </p>
<p class="mb-6"> <p class="mb-6">
<button id="show-setup-code" class="btn-sm btn-blue">Show setup code</button> <button id="show-setup-code" class="btn-sm btn-blue">Show setup code</button>
<button id="hide-setup-code" class="btn-sm btn-blue" style="display: none;">Hide setup code</button> <button id="hide-setup-code" class="btn-sm btn-blue hidden">Hide setup code</button>
<span class="mx-2">or</span> <span class="mx-2">or</span>
<button id="copy-setup-code" class="btn-sm btn-blue">Copy setup code</button> <button id="copy-setup-code" class="btn-sm btn-blue">Copy setup code</button>
</p> </p>
<p id="setup-code" style="display: none;"> <p id="setup-code" class="hidden">
<%= raw @svg %> <%= raw @svg %>
</p> </p>
</section> </section>
@ -47,18 +47,18 @@
buttonShow.addEventListener('click', function(ev) { buttonShow.addEventListener('click', function(ev) {
ev.preventDefault(); ev.preventDefault();
setupCode.style.display = 'block'; setupCode.classList.remove('hidden');
buttonShow.style.display = 'none'; buttonHide.classList.remove('hidden');
buttonHide.style.display = 'inline-block'; buttonShow.classList.add('hidden');
window.scrollTo(0, document.body.scrollHeight); window.scrollTo(0, document.body.scrollHeight);
}); });
buttonHide.addEventListener('click', function(ev) { buttonHide.addEventListener('click', function(ev) {
ev.preventDefault(); ev.preventDefault();
const el = document.querySelector('#setup-code'); const el = document.querySelector('#setup-code');
setupCode.style.display = 'none'; setupCode.classList.add('hidden');
buttonShow.style.display = 'inline-block'; buttonHide.classList.add('hidden');
buttonHide.style.display = 'none'; buttonShow.classList.remove('hidden');
}); });
buttonCopy.addEventListener('click', function(ev) { buttonCopy.addEventListener('click', function(ev) {