How to make visible and invisible container in css

Forums jQueryHow to make visible and invisible container in css
Staff asked 3 months ago

I’m having a difficulty. Red rectangles indicate the type switcher and containers. Each container has its own unique ID. When one of the options in the type switcher is selected, the other containers should become invisible. When the option “Furniture” is selected, for example, just the last container with the id “Furniture” should be shown, and all others should be invisible. I’m not very good at jQuery.

 

 

<form id="product_form">
  <label id="caption" style="line-height: 180%;">SKU <input type="text" id="text-field" name="sku" style="margin-left: 37px;"/></label><br />
  <label id="caption" style="line-height: 180%;">Name <input type="text" id="text-field" name="name" style="margin-left: 21px;"/></label><br />
  <label id="caption" style="line-height: 180%;">Price($) <input type="text" id="text-field" name="price" style="margin-left: 2px;"/></label><br />
  <br />
  <label id="caption">Type Switcher<select id="productType" name="type" style="margin-left: 5px;">
                    <option value="D">DVD</option>
                    <option value="B">Book</option>
                    <option value="F">Furniture</option>
                </select></label>
  <br /><br /><br />
  <div id="DVD">
    <p style="text-align: left; line-height:180%;" id="caption">Please provide size in MB</p>
    <label id="caption" style="line-height: 180%;">Size (MB) <input type="number" name="size" style="margin-left: 2px" /></label>
  </div>
  <div id="Book">
    <p style="text-align: left; line-height:180%;" id="caption">Please provide weight in KG</p>
    <label id="caption" style="line-height: 180%;">Weight (KG) <input type="number" name="weight" style="margin-left: 2px" /></label>
  </div>
  <div id="Furniture">
    <p style="text-align: left; line-height:180%;" id="caption">Please provide dimensions in HxWxL format</p>
    <label id="caption" style="line-height: 180%;">Height (CM) <input type="number" name="height" style="margin-left: 5px" /></label><br />
    <label id="caption" style="line-height: 180%;">Width (CM) <input type="number" name="width" style="margin-left: 11px" /></label><br />
    <label id="caption" style="line-height: 180%;">Length (CM) <input type="number" name="Length" style="margin-left: 2px" /></label><br />
  </div>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 

Answers (1)

Add Answer
Prince Dhameliya Marked As Accepted
Staff answered 3 months ago
const
  productForm = document.querySelector('#product_form')
  sBlocks     = document.querySelectorAll('#DVD, #Book, #Furniture')
  ;
productForm.type.onchange = setTypeSwitcher;

// on init page
setTypeSwitcher()

function setTypeSwitcher ()
  {
  sBlocks.forEach( blk => 
    blk.classList.toggle('noDisplay', blk.id[0] != productForm['type'].value)
    )
  }
body {
  font-family : sans-serif;
  font-size   : 14px;
  }
label {
  display : block;
  margin  : 0;
  width   : 20em;
  height  : 2em;
  padding : .2em 0 0 0;
  font-weight : bold;
  line-height : 2em;
  overflow    : hidden;
  }
label input {
  float : right;
  width : 14em;
  }
label:after {
  content: ' .  .  .  .  .  .';
  font-weight : normal;
  }
label select,
label input[type=number] {
  width      : 12em;
  text-align : center;
  float      : right;
  }
#product_form p {
  margin-bottom : .2em;
  }
.noDisplay {
  display : none;
<form id="product_form">
  <label> SKU      <input type="text" name="sku"   /> </label>
  <label> Name     <input type="text" name="name"  /> </label>
  <label> Price($) <input type="text" name="price" /> </label>
  
  <label> Type Switcher
    <select name="type">
        <option value="D">DVD</option>
        <option value="B">Book</option>
        <option value="F">Furniture</option>
    </select>
  </label>
  
  <div id="DVD">
    <p> Please provide size in MB </p>
    <label> Size (MB) <input type="number" name="size" /></label>
  </div>
  <div id="Book">
    <p> Please provide weight in KG </p>
    <label> Weight (KG) <input type="number" name="weight"  /></label>
  </div>
  <div id="Furniture">
    <p> Please provide dimensions in HxWxL format </p>
    <label> Height (CM) <input type="number" name="height" /></label>
    <label> Width (CM)  <input type="number" name="width"  /></label>
    <label> Length (CM) <input type="number" name="Length" /></label>
  </div>
</form>

 

Subscribe

Select Categories