Show/Hide number of divs based on select number

Hi,

I am trying to create a select drop down with 4 options (1-4).

What I am trying to do is display a number of divs with form elements in depending on the number selected.

For example, if 3 is selected, it will display 3 divs with the following in:

	<div id="form-1">
		<input class="input" id="first-name-1" type="text" >
		<input class="input" id="last-name-1" type="text" >
		<input class="input" id="email-1" type="text" >
	</div>

However, each of those divs would have it’s own version of the id (first-name-1, first-name-2, first-name-3 etc).

I have the following fiddle, but it is just showing/hiding the same div but without any unique elements.

What would be the best way to achieve the above?

Thank you.

display: block; / display: none; for all your divs

Hi,

I’ve managed to make a simpler version here:

However, When the page loads, all 4 of the options are visible rather than all hidden to start with.

Is there a way I can have all the options hidden when the page loads until a number is selected?

Thanks

Hi there toolman,

does this basic example help…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">

body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

.hide {
     display:none;
 }

</style>

</head>
<body> 

 <select id="number-of-rooms">
  <option value="">Select the number of rooms (max. 4)</option>
  <option value="0">1 Room</option> 
  <option value="1">2 Rooms</option>
  <option value="2">3 Rooms</option>
  <option value="3">4 Rooms</option>
 </select>

  <div class="hide">Room1</div>
  <div class="hide">Room2</div>
  <div class="hide">Room3</div>
  <div class="hide">Room4</div>

<script>
( function( d ) {
  'use strict';
   var rooms = d.querySelectorAll( '.hide' ); 
   d.querySelector( '#number-of-rooms' ).addEventListener( 'change', 
      function() {
         for( var c = 0; c < rooms.length; c ++ ) {
              rooms[ c ].classList.add( 'hide' );
         }
         if ( this.value !== '' ) {
              rooms[ this.value ].classList.remove( 'hide' );
         }
      },false);
 }( document ));
</script>  

</body>
</html>

coothead

Thanks, but that seems to only show one item selected.

I think I have it here, but I can’t get the default to show 0 rooms as default when the page is loaded.

Well, unless I have misunderstood the above requirement,
I thought that my code did that. :winky:

On page load:-

page-open

On number selection:-

selection

Is that not your requirement?

coothead

Just place this after your script, so that the rooms start off as being hidden.

$(".room-number div").hide();
2 Likes

Hi there toolman,

I have now recovered from my Brain fart :wonky:,
and fully understand your real requirement. :winky:

Although @Paul_Wilkins has resolved your
issue you may still be interested in this Vanilla
JavaScript solution, as it avoids the use of
undesirable inline CSS.

It also allows full working of the select element. :winky:

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">

body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

.hide {
     display:none;
 }
</style>

</head>
<body> 

 <form id="myform" action="#">
  <select id="number-of-rooms">
   <option value="">Select the number of rooms (max. 4)</option>
   <option value="1">1 Room</option> 
   <option value="2">2 Rooms</option>
   <option value="3">3 Rooms</option>
   <option value="4">4 Rooms</option>
  </select>
  <label for="number-of-rooms"> Room selection</label>
 </form>

  <div class="hide">Room1</div>
  <div class="hide">Room2</div>
  <div class="hide">Room3</div>
  <div class="hide">Room4</div>

<script>
( function( d ) {
  'use strict';

   var c, rooms = d.querySelectorAll( '.hide' );
   d.querySelector( '#myform' ).reset();

   d.querySelector( '#number-of-rooms' ).addEventListener( 'change',
      function() {
        for( c = 0; c < rooms.length; c ++ ) {
              rooms[ c ].classList.add( 'hide' );
         }
        for ( c = 0; c < this.value; c ++ ) {
              rooms[ c ].classList.remove( 'hide' );
         }
      },false );
 }( document ));
</script>  

</body>
</html>

coothead

2 Likes

Thank you very much everyone :slight_smile:

Hi again,

I have now added in a table which displays columns depending on the selection made by the drop down. It works fine, but the table is shown by default with all columns when the page is loaded.

I have tried adding

$('.features table').hide();

but it hides the table no matter what is selected.

This is the updated fiddle I have:

Can anyone help me to hide the table by default and then show the columns depending on what selected is made?

Thanks

Hi there toolman,

Like this…

https://jsfiddle.net/L0qfbuos/

…perhaps. :winky:

coothead

1 Like

Thanks :slight_smile: It is almost what I need. I ideally need the whole table to be hidden including the thead until an option is selected.

I tried hiding the thead, but it didn’t work

How did you try hiding thead? Show us your code.

I tried hiding it with jQuery:

It hides, but doesn’t show when after selecting an item from the drop down

Hi there toolman,

does this…

https://jsfiddle.net/9p8xbv6z/

…hit the spot? :biggrin:

coothead

1 Like

Thanks, that was spot on :smiley:

The best way is to have all the divs already in the html file, but include a class of “hidden”.
In the css add .hidden {display: none;}
In the js, loop through 4 times and compare the input-value to the index
If the index is greater than the input-value add the hidden class to the div element, else remove the hidden class.
I don’t use jQuery so can’t give you the code for adding and removing classes to elements.

Sorry @dennisjn but using CSS to initially hide beneficial content is not the best way to do it. Your technique fails to be useful when JavaScript is not available.

Other better techniques have already been employed in this situation. Because it’s best in this situation to have the information initially shown, and JavaScript is used to show/hide the information, it needs to be JavaScript that also initially hides the information.

1 Like

I don’t want to get into a cat-fight here but I assumed that as the original post’s jsfiddle used jQuery that a jScript solution was permitted.
As I said I know little jQuery and prefer vanilla jScript as it is less constricting than jQuery.
Using CSS to initially hide the div elements until a selection is made makes a lot more sense to me than having them all visible at load end and then hiding them.
When jScript is not available a version could be created using a form which submits the selection to the page when it reloads and PHP used to create the required number of div snippets.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.