title: Shopify - Debut theme - show and hide additional text boxes containing variant metafield depending on selected variant dropdown option
body: <p>As the title suggests, I'm looking to update my Shopify Debut theme to show and hide an additional text boxes containing variant metafield depending on selected variant dropdown option. </p>
  
  <p>Here's the HTML select dropdown:</p>
  
  <pre><code>&lt;select class="single-option-selector single-option-selector-product-template product-form__input" id="SingleOptionSelector-0" data-index="option1"&gt;
      &lt;option value="Option no 1" selected="selected"&gt;This is option 1&lt;/option&gt;
      &lt;option value="Option no 2"&gt;This is option 2&lt;/option&gt;
      &lt;option value="Option no 3"&gt;This is option 3&lt;/option&gt;  
  &lt;/select&gt;
  </code></pre>
  
  <p>In Shopify product.liquid template, it looks like so - I've added the id="{{variant.id}}" to the option but it's not populating it on testing, I was hoping this would be a way of matching both the select option and the div together.</p>
  
  <pre><code>&lt;select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}"&gt;
  {% for value in option.values %}
      {% if option.selected_value == value %}
      &lt;option id="{{variant.id}}" value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}&gt;{{ value }}&lt;/option&gt;
      {% else %}
      &lt;option id="{{variant.id}}" value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}&gt;{{ value }}&lt;/option&gt;
      {% endif %}
  
  {% endfor %}
  &lt;/select&gt;
  </code></pre>
  
  <p>Then I want to show the selected product variant metafield (option.description) based on the selected variable of the product. I'm currently using the following code (this is a shopify liquid reference) to pull in all of the  variant metafields which would be ready to show and hide:</p>
  
  <pre><code>{% for variant in product.variants %}               
      &lt;div class="variantoption" id="{{variant.id}}"&gt;
          {% if current_variant.id %}
          {{ variant.metafields.option.description }}
          {% else %}
          {% endif %}
          &lt;/div&gt;
  {% endfor %}  
  </code></pre>
  
  <p>I understand that I need to either add some onchange javascript to the select or alternatively hook into the Shopify theme js to show / hide the selected variant's metafield options. This could be based on the IDs, but I'm struggling to pull those into the page on the select box, plus all tutorials I've come across reference a 'selectCallback' function but this isn't present in the Debut theme - it's a slate based Shopify theme.</p>
  
  <p>Assistance on finishing this dynamic show / hide of variant metafields based on the selected option would be most appreciated!</p>
  
  <p>/<strong>* UPDATE *</strong>/</p>
  
  <p>I've managed to get to this stage with the code:</p>
  
  <pre><code>_updateMetaDescription: function(evt) {
  
    var variant = evt.variant;
    var urlvariant = GetURLParameter('variant'); // finds variant parameter in URL
    var currentvar = $('.variantoption' + '#' + urlvariant); // looks for div with class MetaDescription &amp; ID with the same variant as in the URL
  
      if (currentvar) {
        // The variant exists, remove hide class.            
  
        $(this.selectors.metaDescription).removeClass('hide');
         }
  
    else {
      $(this.selectors.metaDescription).addClass('hide');
    }
  },
  </code></pre>
  
  <p>Trouble is it's removing the 'hide' class for all ids. Somehow it's not recognising the correct ID associated with the DIV.</p>