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/base";
|
||||||
@import "tailwindcss/components";
|
@import "tailwindcss/components";
|
||||||
@import "tailwindcss/utilities";
|
@import "tailwindcss/utilities";
|
||||||
|
@ -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) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user