Join Jen Kramer for an in-depth discussion in this video Adding a check box and using collapse to enhance usability, part of Bootstrap 3: Adding Interactivity to Your Site.
Alright, so, we only have one part of this form left to go to put the basic functionality in place and that's down here at the bottom where we have Subscribe me to the newsletter. So, ideally, what I'd like to have is this check box in place to Subscribe me to the newsletter and if it's checked, only then I would like it to ask me for my email address. I don't need to have Your email here on the screen all the time. What I'd like for it to do is to actually not be there unless subscribing to the newsletter is checked and then Your email can appear.
So, that's the functionality that I want to have here. And the other thing that I should probably do is style that Submit button down there at the bottom, which would be relatively easy to do as well. Hopefully, you know how to do it, without me even showing you at this point. Okay. So let's hop on into Sublime Text. And around line 106, you're going to see a div with a class of form group and this div runs down to line 112. Inside of that, we have this label with the check box and the word Subscribe me to the newsletter and then a label for Your email and then the input box for that email.
This div with the class of form group I actually put here kind of sort of deliberately just to sort of show you where the widgets that we're going to be working with are located on this webpage. But, ultimately, it's actually in the wrong place for this chunk of HTML. So, what I'd like for you to do is to take that div with the class form group and we're actually going to move it to appear right here around line 110. And this is going to wrap around the email options here.
So, it'll be around the label with Your email and the input text box with the name and email, or lines 107 and 108 up here at the top, where we have the check box itself. Let's go ahead and get that formatted. So, first of all, this is the label for the subscribe box. And so, connect those two things together because, of course, the input name here is subscribe. And then we're going to give this a class of checkbox-inline.
Ultimately, we're going to have the check box appear next to the words that are describing it. And then here for this particular check box, this should be all setup to have that look and function correctly. So if you just go ahead and save this, and then come to your web browser and refresh, you'll see that, that looks better already. There's your check box with the word Subscribe me to the newsletter. Alright, so that's just the basic styling for that. Then there are the pieces to make this appear or disappear as required. And so to have that magic happen, we're going to add that to this input name line of HTML here.
So on line 108, inside of the input tag itself, we're going to add two things, data-toggle of collapse. So we're telling this to collapse. And we're going to say, data-target of #email. So this is the first part of the code here. And what we're saying is that when this box is checked, then we're going to have the email option here appear on the page. Okay. So then let's worry about the formatting for this email box.
Just as we've done before, we're going to add to this some additional code. So here on line 111, at the label here, we're going to add a for email because, of course, this label goes with the input box here with the name of email. And we're also going to add some of that grid styling that we've seen before. We'll make it match what happened further up on the page. So we'll add a class of col-sm-2. So there's Your email. And then, we'll go ahead and wrap a div around our input type down here, div class equals col-sm-10, and a /div down here.
And we'll also, in this line 113 here, where we have the input type of text, name of email, we'll also add a class of form-control just to make things a little bit prettier. If you go on ahead and save that and refresh the page, there's Your email, okay? It matches the formatting up here for your name. Now, of course, nothing is happening yet. I can check this box all day long. Your email is not appearing or disappearing. So that's the last chunk of code that we need to add here. So here, what we're going to do is we're going to add a little bit of extra classes up here on line 110.
This is a div that's wrapping around the Your email line in line 111 as well as the actual email box itself. We're going to add two more classes, a class of collapse and a class of in. We're also going to give this an id, id of email. And that id of email will work with this data target of #email here to combine these two together and make them work correctly. The very last part of this that we need to do is to tell the collapse function to be listening for changes and then activate when that box is checked or unchecked.
And so, we're going to do that down here at the bottom. We've already got a line of code here for the tool tip. To that, we'll just hit Return. And, once again, this, of course, always takes the same format. As I said before, you select something and you do something to it. So, you've selected something here and what are we doing to it? We're going to collapse it. It's not going to take any arguments. So, how do we select what it is? If you go back and take a look at the HTML that we have here, this particular div on line 110 has both classes of form group, which lots of other divs have that class, but this one also has a class of collapse.
So let's use those two together. That'll make a unique identifier. So .form-group followed by .collapse. And make sure that those have no spaces in between them because, with no spaces here, this means it has to have classes of both form group and a class of collapse. If you have a space in between these, so .form-group space .collapse, you're saying the class of collapse inside of some sort of a selector or HTML tag with the class of form group.
Okay, so that should be all the code that we need here. Go on ahead and save this page. And now, when you come back to your webpage and refresh, you should have this Subscribe me to this newsletter right here. And when you check it, it should fold down to Your email. And when you uncheck it, it should go away. Alright, so that's looking pretty good but, of course, that Submit button is doing what we don't want it to do, which is sort of bumping around a little bit here as we check and uncheck that box. So let's fix that little problem as well.
This is the very end here. So we have our button with the type of Submit. We can go on ahead and surround that with something like the div with the class of form group again. And, of course, after the button, we'll go ahead and put a /div. And we'll even this all up so it's a little easier to read. There we go. In this button with the type of Submit, we can also, of course, add some classes there, btn is always required to format a button in Bootstrap and then we'll say, btn-primary.
We already have that formatted to take on the purple color instead of the blue color from earlier videos, so this should be a nice looking Submit button. Go on ahead and save that and then refresh the page again. And now, you have Submit on its own line. You should be able to check and uncheck this box, having your email appear and disappear, alright, and the Submit button appears here underneath. If you like, we can go ahead and reduce the size of the screen a bit, and you can see that it works at smaller dimensions as well, nice and smoothly.
Great. So our form is looking pretty good. We've got all of the elements in place. And we have our basic styling applied here. Now it's time to clean up a few little pesky problems.
Need help getting Bootstrap up and running? Check out Bootstrap 3 Essential Training.
- Installing Bootstrap 3, Sublime Text 2, and jQuery
- Planning the thumbnail gallery
- Creating modal windows
- Creating an image carousel
- Linking images and adding captions
- Changing the carousel rotation
- Laying out and styling a contact form