Use Tailwind classes to hide/show elements
This commit is contained in:
parent
f1d3e3d8ec
commit
78aea5d608
@ -1,4 +1,4 @@
|
||||
// version 4
|
||||
// version 5
|
||||
@import "tailwindcss/base";
|
||||
@import "tailwindcss/components";
|
||||
@import "tailwindcss/utilities";
|
||||
|
@ -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) {
|
||||
|
Loading…
x
Reference in New Issue
Block a user