jQuery show hide each option rather than div

[LaneSalaman]

I have a form for a client where I need a certain amount of passengers to display a certain amount vehicle types.
I’m holding a brief demo here: http://www.webspinning.co.uk/demos/lynx-form/ . I want the end result to be exactly the same but I can’t figure out how to do it without using different divs, I want it so that it hides and shows each option.

Here is the code:
HTML:

* Passengers:



Number of Passengers

1

2

3

4

5

6-8

9-16









*Vehicle Type:



Select Vehicle





Saloon

VIP

Estate

MPV

Large MPV

Minibus







*Vehicle Type:



Select Vehicle





Saloon

VIP

Estate

MPV

Large MPV

Minibus



4 passengers is not the most comfortable way to travel in a Saloon, Vip or Estate. Have you considered a larger vehicle?






*Vehicle Type:



Select Vehicle





MPV

Large MPV

Minibus







*Vehicle Type:



Select Vehicle





Large MPV

Minibus







*Vehicle Type:



Select Vehicle





Minibus

CSS:

body { background: #eee; font-family: 'PT Sans', Calibri, Arial; font-size: 1.2em; }



#wrapper { width: 800px; text-align: center; margin: 0 auto; }

#wrapper .form { width: 750px; float: left; text-align: left; padding: 25px; background: #fff; box-shadow: 0 0 1px 2px rgba(30, 30, 30, 0.3); margin: 25px 0 0 0; }

#wrapper .form select { background: #eee; border: 1px solid #ddd; font-size: 1em; font-family: 'PT Sans', Calibri, Arial; margin: 0 0 0 25px; }

#wrapper .form .red { color: #ff3333; margin: 0 5px 0 0; }



#wrapper .form .passengers { width: 100%; float: left; }

#wrapper .form #divarea1 { width: 100%; float: left; margin: 40px 0 0 0; }

#wrapper .form #divarea2 { width: 100%; float: left; margin: 40px 0 0 0; }

#wrapper .form #divarea2 p { width: 718px; padding: 15px; background: #f7f7f7; border: 1px solid #ddd; line-height: 33px; border-radius: 3px; }

#wrapper .form #divarea3 { width: 100%; float: left; margin: 40px 0 0 0; }

#wrapper .form #divarea4 { width: 100%; float: left; margin: 40px 0 0 0; }

#wrapper .form #divarea5 { width: 100%; float: left; margin: 40px 0 0 0; }

Any help will be really appreciated, thank you.

[Paulie_D]

The only way I can think of (with a single list) is to apply and remove classes (for visibility/display) based on the number of passengers or, alternatively, change css properties of specific classes based on the selected number.

All with JS, of course, but that’s outside my comfort zone.

[LaneSalaman]

@Paulie_D thank you for your response, I’ve figured it out now :)

[Author]

Posts