Automatically refresh a collapsible content section on a product page upon variant change

[S0confused]

I'm using the Dawn theme and have a collapsible content section added to my product pages, with custom section blocks:

                    {% for variant in product.variants %}
                      {% if product.selected_or_first_available_variant.id == variant.id %}
                        {% if block.settings.custom_row_content == 'variant_description' %}
                          {% render 'variant-description' %}
                        {% elsif block.settings.custom_row_content == 'variant_details' %}
                          {% render 'variant-details' %}
                        {% endif %}
                      {% endif %}
                    {% endfor %}

 the page requires the user to manually refresh the page to view the content after selecting a new variant, but I would like it to happen automatically

about a year ago, I had this code added immediately after the above ^, though it no longer seems work:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" defer></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".no-js-hidden").on("click", function(){
var refreshint = setInterval(function(){
location.reload();
}, 1000);    });   });
</script>   

I know this requires JavaScript which is, quite literally, a foreign language to me, so I'm completely lost 😭

[Noharoni1]

Oh No Keep it up

[BSS-TekLabs · Accepted solution]

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const variantSelector = document.querySelector('[name="id"]'); // Selector for variant dropdown

    if (variantSelector) {
      variantSelector.addEventListener('change', function() {
        updateCollapsibleContent(this.value); // Call function to update content based on selected variant
      });
    }
    
    function updateCollapsibleContent(variantId) {
      // Use AJAX to fetch the content related to the selected variant and update the collapsible section
      fetch(`/products/{{ product.handle }}?variant=${variantId}`)
        .then(response => response.text())
        .then(html => {
          // Parse the new variant details from the returned HTML
          const parser = new DOMParser();
          const doc = parser.parseFromString(html, 'text/html');

          // Get the new collapsible content from the fetched HTML
          const newContent = doc.querySelector('.collapsible-content'); // Adjust selector based on your collapsible section class

          // Replace the current content with the new content
          const collapsibleContentSection = document.querySelector('.collapsible-content'); // Adjust selector based on your collapsible section class
          if (collapsibleContentSection && newContent) {
            collapsibleContentSection.innerHTML = newContent.innerHTML;
          }
        })
        .catch(error => {
          console.error('Error fetching variant content:', error);
        });
    }
  });
</script>

[BSS-TekLabs]

You can try this code 

- variantSelector: This is used to select the variant dropdown. In the Dawn theme, it is typically named name="id".

- updateCollapsibleContent: This function is called when the user changes the variant. It uses AJAX to fetch the corresponding HTML for the new variant and updates the collapsible section.

- Selector .collapsible-content: Adjust this selector to point to the collapsible section you want to update.

[S0confused]

thank you so so much! this worked perfectly! 

[BSS-TekLabs]

Glad to help you. Have a good day.