Trying to use JavaScript (no jQuery), to show a div (2 classes) in the html when checkbox is selected

Question

basically I have a form and it has 2 different expansions depending on whether a single or multi day trip is selected (not coded yet, once I get this working I can sort that out properly). I have looked at a lot of similar questions but unfortunately, many of them use jQuery.

I've been working on it for 2 days now, Googled, looked here and got this far on my tutor's suggestion but it isn't quite there yet and I don't understand enough to fix it. I'm hoping it's something simple and I'm just a bit too inexperienced at this point to recognize it.

Right now, I'm just trying to make a div with 2 different classes show depending on which is clicked. The classes being hard coded into the function doesn't matter at the moment. Eventually I will want the div's to appear (still depending on the check box selected) when the submit button is clicked, but that can be a future endeavor (would assume it's just some if/else statements.

If anyone can help, or even just point me in the right direction (keeping in mind I started learning this around 3 weeks ago and haven't even used it in the last 2) I would greatly appreciate your help.

I have attached a JSFiddle of current code, and a picture of the final result from photoshop. (everything below the horizontal white line will initially be hidden until a checkbox is selected).

http://imgur.com/8mY2ZVH

Answer 1

First of all under Frameworks & Extensions, set the select box to No Wrap - in body instead of onLoad. (In the top left).

Second, you have multiple syntax errors.

Multi day<input type="checkbox" name="multi-day"         value="multi-day" onclick=""ShowExtraForm1('multiBooking')"">

Remove one set of "" around the ShowExtraForm1.

document.getElementById('singleBooking')style.display="none";
document.getElementById('multiBooking')style.display="none";

Add a . before the 'style' attribute, it's currently a syntax error.

And also, where are the actual forms you are trying to hide?

Answer 2

I have edited your jsfiddle link

think its not working there but this is the function you want

function ShowExtraForm1() 
    {
        var singlechecksts;
        var multichecksts;
        singlechecksts= document.getElementById('singlecheck');
        multichecksts= document.getElementById('multicheck');

        if(singlechecksts.checked)
        {
        document.getElementById('singleBooking').style.display="block";
        document.getElementById('multiBooking').style.display="none";
        }

        if(multichecksts.checked)
        {
        document.getElementById('singleBooking').style.display="block";
        document.getElementById('multiBooking').style.display="block";
        }
    }

where singlecheck and multicheck are id's of your checkboxs