Why isn't my custom liquid code fetching user information?

[vapevanguard]

i have a custom liquid block imbedded inside a collapsible row and i need it to get user information. ive got some basic code for that, but it doesnt show unless i remove style="display: none;" then it shows regardless of the row being open or closed.

<div id="row id">
  <!-- Content of the collapsible row -->
  
  <div class="custom-content" style="display: none;">
    <h3>Contact Information</h3>
    <form id="user-input-form">
      <label for="email">Email Address:</label>
      <input type="email" id="email" name="email" required>

      <label for="website">Link to Website:</label>
      <input type="url" id="website" name="website" required>

      <label for="price">Price:</label>
      <input type="number" id="price" name="price" required>

      <button type="button" id="submit-user-input">Submit</button>
    </form>
  </div>
</div>

i also implemented some javascript 

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      console.log('Script is running.'); // Added this line for debugging
      function isIE() {
        const ua = window.navigator.userAgent;
        const msie = ua.indexOf('MSIE ');
        const trident = ua.indexOf('Trident/');

        return msie > 0 || trident > 0;
      }

      if (!isIE()) return;

      var coll = document.querySelector('.collapsible');
      var content = document.querySelector('.content');

      coll.addEventListener('click', function () {
        content.style.display = content.style.display === 'block' ? 'none' : 'block';
      });

      var submitButton = document.getElementById('submit-price');
      submitButton.addEventListener('click', function () {
        var productURL = document.getElementById('product-url').value;
        var betterPrice = document.getElementById('price').value;

        // Do something with the user input, e.g., send it to the server
        console.log('Product URL:', productURL);
        console.log('Better Price:', betterPrice);

        document.getElementById('product-url').value = '';
        document.getElementById('price').value = '';
      });

      var userCollapsible = document.querySelector('.user-collapsible');
      var userContent = document.querySelector('.user-content');

      userCollapsible.addEventListener('click', function () {
        userContent.style.display = userContent.style.display === 'block' ? 'none' : 'block';
      });

      var submitUserButton = document.getElementById('submit-user-input');
      submitUserButton.addEventListener('click', function () {
        var userEmail = document.getElementById('email').value;
        var userWebsite = document.getElementById('website').value;
        var userPrice = document.getElementById('price').value;

        // Do something with the user input, e.g., send it to the server
        console.log('Email:', userEmail);
        console.log('Website:', userWebsite);
        console.log('Price:', userPrice);

        document.getElementById('email').value = '';
        document.getElementById('website').value = '';
        document.getElementById('price').value = '';
      });
    });
  </script>

[ProtoMan44]

@vapevanguard  HI, as per my knowledge above codes do not exist in liquid code they are all HTML and JS. 

so for this code, you can create a new HTML field blow the liquid area, i hope it will work. thanks

[vapevanguard · Accepted solution]

I solved it, I moved the  {{ block.settings.custom_liquid }} to inside the details of the collapsible row and removed the 

style="display: none

</summary>
  <div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
    {{ block.settings.content }}
    {{ block.settings.page.content }}
    {{ block.settings.custom_liquid }}
  </div>
</details>