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/components";
@import "tailwindcss/utilities";

View File

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