Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS jQuery show hide each option rather than div

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #39385
    LaneSalaman
    Member

    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:









    Airport Lynx Form Upgrade





















    * Passengers:




    *Vehicle Type:



    *Vehicle Type:

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




    *Vehicle Type:



    *Vehicle Type:



    *Vehicle Type:











    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.

    #107952
    Paulie_D
    Member

    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.

    #108801
    LaneSalaman
    Member

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.