How to show a certain div on the product page when a certain option is selected?

[Zain-Rashid]

Need to show a div for custom size  button only when the Option "Custom" is selected but whenever I use Product.option with if condition it just completely blocks the div from showing on the product page.
Kindly guide how to solve

[Tal19]

<!-- Example HTML structure -->
<select id="product-options">
  <option value="standard">Standard</option>
  <option value="custom">Custom</option>
</select>

<div id="custom-size-div" style="display: none;">
  <!-- Your custom size button and related content -->
  <button>Custom Size Button</button>
</div>

<script>
  // Get a reference to the select element
  const selectElement = document.getElementById('product-options');
  
  // Get a reference to the div you want to show/hide
  const customSizeDiv = document.getElementById('custom-size-div');
  
  // Function to handle showing/hiding the custom size div
  function toggleCustomSizeDiv() {
    if (selectElement.value === 'custom') {
      customSizeDiv.style.display = 'block';
    } else {
      customSizeDiv.style.display = 'none';
    }
  }
  
  // Attach event listener to detect changes in select element
  selectElement.addEventListener('change', toggleCustomSizeDiv);
  
  // Initial check on page load
  toggleCustomSizeDiv();
</script>