How to display a div on a page if a certain variant is selected

New Member
5 0 0

I'm working on: Beyond Wonderland Creations - 45th Anniversary

I want to show the following div when the 3rd variant - 2 charms (+$1) is selected:

<div id="2charm-select">
  <div class="swatch clearfix">
  <div class="header">
    <p class="line-item-property__field">
  CHARM 2:
    </div>
  <div class="swatch-section">
  
      
    <div class="swatch-element">
		<input id="charm2-heart" required class="required" type="radio" name="properties[CHARM 2]" value="Heart" checked > <label for="charm2-heart">Heart</label>
    </div>
    <div class="swatch-element">
        <input id="charm2-love" required class="required" type="radio" name="properties[CHARM 2]" value="Love" > <label for="charm2-love">Love</label>
    </div>
    <div class="swatch-element">
    <input id="charm2-mom" required class="required" type="radio" name="properties[CHARM 2]" value="Mom" > <label for="charm2-mom">Mom</label>
    </div>
    <div class="swatch-element">
    <input id="charm2-dad" required class="required" type="radio" name="properties[CHARM 2]" value="Dad" > <label for="charm2-dad">Dad</label>
    </div>
    <div class="swatch-element">
    <input id="charm2-wife" required class="required" type="radio" name="properties[CHARM 2]" value="Wife" > <label for="charm2-wife">Wife</label>
    </div>
  </div>
    </p>
            
<style>
.ep_inline_block {display:inline-block;vertical-align:middle;margin-left:10px;}
.ep_block {display:block;margin-top:10px;margin-bottom:2px;}
.swatch-element {margin-right:5px;}
</style>
            </div></div>

How do I accomplish this?

0 Likes
New Member
5 0 0

I tried added the following code but it didn't work, what am I doing wrong?

 

Add charm 2 label 
    {% if product.options.size == 1 and product.options.third != '2 Charms (+$1)' %}
    $('.2charm-select').removeclass('hidden');
	{% endif %}
0 Likes
Shopify Expert
96 17 12

@kaminel - Send over the page URL and the front-end password so I can take a peek.

0 Likes
New Member
5 0 0
Front end bwc2019
0 Likes