Creating visible and invisible containers using CSS

Question

Creating visible and invisible containers using CSS

I am facing an issue with the type switcher and containers marked by red rectangles. Each container has its own ID, and when one option is selected in the type switcher, all other containers should be invisible. For example, if the "Furniture" option is chosen, only the container with the ID "Furniture" should be visible while the rest remain hidden. I struggle with jQuery and would appreciate any help.

https://i.sstatic.net/NoY1G.png

<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>

javascript html jquery css forms

Answer 1

Answer №1

It's important to familiarize yourself with CSS...

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>

Answer 2

It's important to familiarize yourself with CSS...

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>

Answer 3

Answer №2

$('#productType2').on('change', (e) => {
  $('.js-modifyByType').hide();
  $(`.js-modify${e.currentTarget.value}`).show();
});
$('#productType2').trigger('change');

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

<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">Product Type Selector<select id="productType2" 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" class="js-modifyByType js-modifyD">
    <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" class="js-modifyByType  js-modifyB">
    <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" class="js-modifyByType  js-modifyF">
    <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>

Answer 4

$('#productType2').on('change', (e) => {
  $('.js-modifyByType').hide();
  $(`.js-modify${e.currentTarget.value}`).show();
});
$('#productType2').trigger('change');

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

<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">Product Type Selector<select id="productType2" 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" class="js-modifyByType js-modifyD">
    <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" class="js-modifyByType  js-modifyB">
    <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" class="js-modifyByType  js-modifyF">
    <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>

Creating visible and invisible containers using CSS

Answer №1

Answer №2

Similar questions

Which is the better choice for accessing and manipulating JSON files – using Ajax or the Node fs module?

When working with String.fromCharCode in jQuery, it often returns undefined

Tips for displaying multiple date choices with Bootstrap datepicker

Transform a list that can be sorted into a query, then fetch and showcase it once more

Tips for reducing the amount of white space on a card featuring a pie chart in a mobile layout

Having trouble accessing the dashboard after uploading a document to Firestore

ISO format for the number of weeks in a month, considering weeks that cross over Thursday

Ensure that the view is only updated once the JSON has been completely received from the AJAX call in AngularJS

Changing a DOM structure into pure HTML using JavaScript

AJAX functionality seems to be malfunctioning on mobile devices, although it is working properly on the Chrome developer tool

Tips for displaying animations only the first time using HTML and CSS:

Incorporate various variables within a JavaScript loop

Creating specific data types in Vue.js

Issue with Media Queries for adjusting width not functioning correctly

Create a dynamic fbx model complete with textures and animations using three.js

Issue with Django template rendering preventing jQuery events from loading

Reading uploaded .PDF or .DOC files as images without the need for conversion

Is jQuery the key to Masonry's stacking magic?

Is there a Joomla extension available that can display or conceal content upon clicking?

Why isn't my Angular directive able to access the parent controller's scope within its isolated scope?