Shopify Question posted in
The Shopify help center can be found here.

Hide/Show DIV based on option not working – Shopify

JS beginner here so any help is appreciated.

I am trying to get show/hide DIV based on JS.

I am using the following:

HTML

<Select id="single-option-selector-product-template-0">
   <option value="White">White</option>
   <option value="Navy">Navy</option>
   <option value="Heather Ash">Heather Ash</option>
   <option value="Heather Grey">Heather Grey</option>
</Select>
<div id="White" class="colours" style="display:none"> White </div>
<div id="Navy" class="colours" style="display:none"> Navy </div>
<div id="Heather Ash" class="colours" style="display:none">Heather Ash </div>
<div id="Heather Grey" class="colours" style="display:none"> Heather Grey </div>

JS

jQuery(function() {
jQuery('#single-option-selector-product-template-0').change(function(){
            $('.colours').hide();
            $('#' + $(this).val()).show();
        });
    });

Single words option like White and Navy are working fine but not those with 2 or more words like Heather Ash and Heather Grey. The option values are created when I create product in Shopify.

Tags:

3

Answers


  1. 0

    You cannot use id values that has whitespace separated words. You can join them using underscore and use the same value as a value of your <option> element:

    jQuery(function() {
  jQuery('#single-option-selector-product-template-0').change(function() {
    $('.colours').hide();
    $('#' + $(this).val()).show();
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<Select id="single-option-selector-product-template-0">
  <option value="White">White</option>
  <option value="Navy">Navy</option>
  <option value="Heather_Ash">Heather Ash</option>
  <option value="Heather_Grey">Heather Grey</option>
</Select>
<div id="White" class="colours" style="display:none"> White </div>
<div id="Navy" class="colours" style="display:none"> Navy </div>
<div id="Heather_Ash" class="colours" style="display:none">Heather Ash </div>
<div id="Heather_Grey" class="colours" style="display:none"> Heather Grey </div>

    id’s value must not contain whitespace (spaces, tabs etc.). Browsers treat non-conforming IDs that contain whitespace as if the whitespace is part of the ID. In contrast to the class attribute, which allows space-separated values, elements can only have one single ID value.

    Login or Signup to reply.
  2. 0

    If you can you should avoid id values with spaces in them as they can be hard to work with. However, if you have no control over the id values in your HTML, you can use $.escapeSelector (available since jQuery 3.0) to work around the fact that you have a space in your id value which would otherwise cause (for example) #Heather Ash to look for an Ash element under #Heather.

    jQuery(function() {
jQuery('#single-option-selector-product-template-0').change(function(){
            $('.colours').hide();
            $('#' + $.escapeSelector($(this).val())).show();
        });
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<Select id="single-option-selector-product-template-0">
   <option value="White">White</option>
   <option value="Navy">Navy</option>
   <option value="Heather Ash">Heather Ash</option>
   <option value="Heather Grey">Heather Grey</option>
</Select>
<div id="White" class="colours" style="display:none"> White </div>
<div id="Navy" class="colours" style="display:none"> Navy </div>
<div id="Heather Ash" class="colours" style="display:none">Heather Ash </div>
<div id="Heather Grey" class="colours" style="display:none"> Heather Grey </div>
    Login or Signup to reply.
  3. 0 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
    .box{
        color: #fff;
        padding: 20px;
        display: none;
        margin-top: 20px;
    }
    .red{ background: #ff0000; }
    .green{ background: #228B22; }
    .blue{ background: #0000ff; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{
                $(".box").hide();
            }
        });
    }).change();
});
</script>
</head>
<body>
    <div>
        <select>
            <option>Choose Color</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>
    </div>
    <div class="red box">You have selected <strong>red option</strong> so i am here</div>
    <div class="green box">You have selected <strong>green option</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue option</strong> so i am here</div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search