Hide element with CSS and show with Javascript after click

Question

I am trying to make a click on a drop down menu item reveal hidden element (hidden with CSS). When clicking on the drop down, there are 3 items. One is showing the user that it is a required field. The other two are the main items.

Any help with this would be most appreciated!

Here is the JSfiddle: link

HTML

<p>
<label for="service"><b>Service Type</b></label> <br id="resBr" /> 
    <select name="service" id="service">
        <option value="null">Required</option>
        <option onclick="show(1)" value="airTransfer">Airport Transfer</option>
        <option onclick="show(2)" value="hourly">Hourly</option>
    </select>
</p>

<div id="content1" class="content" hidden>
    <p>
        <label for="airline"><b>Airline</b></label> <br id="resBr" /> <input type="text" name="airline" id="airline"> <br id="resBr" /><br id="resBr" />
        <label for="flight"><b>Flight Number</b></label> <br id="resBr" /> <input type="text" name="flight" id="flight"> <br id="resBr" /><br id="resBr" />
        <label for="landing"><b>Landing Time</b></label> <br id="resBr" /> <input type="text" name="landing" id="landing">
    </p>
</div>

<div>
    <p id="content2" class="content" hidden>
        <label for="occasion"><b>Occasion</b></label> <br id="resBr" /> <input type="text" name="occasion" id="occasion"> <br id="resBr" /><br id="resBr" />
        <label for="start"><b>Pickup Time</b></label> <br id="resBr" /> <input type="text" name="start" id="start"> <br id="resBr" /><br id="resBr" />
        <label for="end"><b>Drop Off Time</b></label> <br id="resBr" /> <input type="text" name="end" id="end"><br id="resBr" /><br id="resBr" />
        <label for="pickup"><b>Pickup Address</b></label> <br id="resBr" /> <input type="text" name="pickup" id="pickup"><br id="resBr" /><br id="resBr" />
        <label for="hours"><b>Total Hours</b></label> <br id="resBr" /> <input type="text" name="hours" id="hours">
    </p>
</div>



CSS

#content1 {
     color: blue;
}

#content2 {
    color: green;
}

.hidden {
    display: none;
}



JS

function show(id) {
var allDivs = document.getElementsByClassName('content');
for (var i = 0; i < allDivs.length; i+){
    allDivs[i].classList.add('hidden');
}
document.getElementById('content' + id).classList.remove('hidden');
}

FYI: Java and Javascript are two completely different things. — Antiga
– Antiga, Commented Oct 2, 2014 at 0:23
Also the code in the question is quite differnt to the code in your fiddle. The code in your fiddle seems to work as expected. In the code in your question, hidden is outside the quotes for class. — Jon P
– Jon P, Commented Oct 2, 2014 at 0:34
sidenote: HTML5 doesn't use <br/> and <hr/>, they're just <br> and <hr> now (parsers are in fact instructed to throw away the "self-closing" slash, because HTML is expressly not XML, so "self closing" doesn't mean anything. <img>, <link>, <input> and friends shouldn't have a "self-closing" slash) — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Oct 2, 2014 at 0:39

Jon P · Accepted Answer · 2014-10-02 01:04:15Z

Lets start with the Html error:

you want <div id="content1" class="content hidden"> hidden was ouside of the quotes.

Next the syntax error you want i++ not i + in your for loop.

Fiddle: http://jsfiddle.net/kfnkp6nn/1/

That will get it working basically, but it won't work with keyboard input, for that you want to use the onchange event for the select element, not click for the options.

HTML

<select name="service" id="service" onchange="show(this.selectedIndex)">

Javascript

function show(idx) {
  //There are a few ways to do this, I'm using the 
  //Selected index to show/hide. 
  //YOu could use if/else statements or swich based on selected value

  var allDivs = document.getElementsByClassName('content');
  for (var i = 0; i < allDivs.length; i++) {
    allDivs[i].classList.add('hidden');
  }
  document.getElementById('content' + idx).classList.remove('hidden');
}

function show(idx) {
  //There are a few ways to do this, I'm using the 
  //Selected index to show/hide. 
  //YOu could use if/else statements or swich based on selected value

  var allDivs = document.getElementsByClassName('content');
  for (var i = 0; i < allDivs.length; i++) {
    allDivs[i].classList.add('hidden');
  }
  document.getElementById('content' + idx).classList.remove('hidden');
}

#content1 {
  color: blue;
}
#content2 {
  color: green;
}
.hidden {
  display: none;
}
.content label {
  font-weight: bold;
  display: block;
}
.content input {
  margin-bottom: 2em;
}

<p>
  <label for="service"><b>Service Type</b>
  </label>
  <br id="resBr" />
  <select name="service" id="service" onchange="show(this.selectedIndex)">
    <option value="null">Required</option>
    <option value="airTransfer">Airport Transfer</option>
    <option value="hourly">Hourly</option>
  </select>
</p>

<div id="content1" class="content hidden">
  <p>
    <label for="airline">Airline</label>
    <input type="text" name="airline" id="airline">
    <label for="flight">Flight Number</label>
    <input type="text" name="flight" id="flight">
    <label for="landing">Landing Time</label>
    <input type="text" name="landing" id="landing">
  </p>
</div>

<div>
  <p id="content2" class="content hidden">
    <label for="occasion">Occasion</label>
    <input type="text" name="occasion" id="occasion">
    <label for="start">Pickup Time</label>
    <input type="text" name="start" id="start">
    <label for="end">Drop Off Time</label>
    <input type="text" name="end" id="end">
    <label for="pickup">Pickup Address</label>
    <input type="text" name="pickup" id="pickup">
    <label for="hours">Total Hours</label>
    <br id="resBr" />
    <input type="text" name="hours" id="hours">
  </p>
</div>

In the above snippet I've taken the liberty of tidying up your HTML, you don't need the b or br tags, it can all be done with CSS.

Thanks @Blue. To accept this as your answer please click the tick next to the up/down vote buttons. I suggest you do this if you acceptable answers to your other questions too.

Collectives™ on Stack Overflow

Hide element with CSS and show with Javascript after click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related