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