Show/Hide number of divs based on select number

#1

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.

https://jsfiddle.net/toolman/0fyx8Lw4/5/

What would be the best way to achieve the above?

Thank you.

0 Likes

#2

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

0 Likes

#3

Hi,

I’ve managed to make a simpler version here:

http://jsfiddle.net/toolman/hq0d8xaL/4/

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

0 Likes

#4

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

0 Likes

#5

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.

http://jsfiddle.net/toolman/hq0d8xaL/4/

0 Likes

#6

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

0 Likes

#7

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

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

#8

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

#9

Thank you very much everyone :slight_smile:

0 Likes

#10

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:
https://jsfiddle.net/toolman/zptgr105/1/

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

Thanks

0 Likes

#11

Hi there toolman,

Like this…

https://jsfiddle.net/L0qfbuos/

…perhaps. :winky:

coothead

1 Like

#12

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

0 Likes

#13

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

0 Likes

#14

I tried hiding it with jQuery:

https://jsfiddle.net/toolman/rt7L3zhc/1/

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

0 Likes

#15

Hi there toolman,

does this…

https://jsfiddle.net/9p8xbv6z/

…hit the spot? :biggrin:

coothead

1 Like

#16

Thanks, that was spot on :smiley:

0 Likes