I have now recovered from my Brain fart,
and fully understand your real requirement.
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.
<!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>
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?
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.
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.
,
