JQuery FAQ Slider Tutorial

Key Takeaways

today we're going to be building a simple FAQ slider and we're going to use just a little bit of jQuery and JavaScript um some HTML and just a little bit of CSS so let me show you the finished product what it'll look like so very simple we just have some questions and we can click on a question and it will reveal that answer for that particular question uh we can have uh hover events to make these open and close but uh we're just using clicks right now so let's get started I'm going to create a new folder and I'm going to call it fq I'll just call it FAQ and we need to create our file structure so of course we need our our um HTML file which I'm going to call index.html [Music] and then we need we're going to need our jQuery file which will be a JavaScript so I'm going to call that jquery.js instead of using a Google CDN or some other CDN we're actually going to include the the the actual file because we're we're working on our local host and I know sometimes Chrome has issues with using CDN on on local hosts um and the last thing we need need is a stylesheet so I'm going to create a new text document and call that [Music] style.css all right so if we open up our index file obviously there's nothing there so I'm going to open this in I'm using notepad++ which is a great editor for um simple Web projects like this I also have the FTP plugin over here but we're not going to be using using that um so the first thing I'm going to do is just create a structure we're going to use the doc the HTML 5 doc type and we'll create and we'll put on our main HTML tags head body tags and we want to close the HTML all right and we'll give this a title we'll just say FAQ slider all right so the basic document structure if we reload this we can now see the title change so the first thing I want to do is add the HTML and all we have for HTML basically is an unordered list so I'm going to put it little tab indent in here and open up a unordered list tag and close that and then we're going to have a couple lists we have Li and I'm going to give this a class of Q for question and then we're going to have a uh Li with a class of a for answer okay Li and we'll just say um here is a question here is a question one and then we'll just put something here we'll say this is the answer to the question so the content here isn't important uh you can put absolutely whatever you want but I'm going to copy these I'm going to well five or six of them and we'll just change the number in the question three 4 five and six all right so that's basically all we're going to have for our HTML we have a a li tag which is a question and then the LI tag which is an answer okay so if we save that and we go and look we just have a simple unordered list so the next thing I want to do is style this thing so in the head tag I'm going to actually just include I'm going to do a link [Music] real stylesheet and we're going to point that the stylesheet is going to be located in the same folder so we'll just put Style CSS and we want type type is text/css all right so if we go to that file um that's not it where's the file the folder we just created all right there it is so we want to open up style CSS and let's just give this a test we'll say body and display none just to see if it's working if it's connected right all right so it's working so we can get rid of that so for the body we are going to have a width of 500 pixels and we want margin Auto because we want it set in the middle and then we want to align the text to the center okay so that's the body next I want to style just all the LI tags and I just want to take off the bullet so we're going to say list style um list style none next we want the answer list so l i. a and we want to have no margin and we want a padding of excuse me a padding of 1 M on the top and bottom and zero on the right and left okay so Li doq which is the questions we have a couple we have a few Styles we want to add here first of all we want to make the cursor pointer just so the user knows that they should be clicking on it uh we're going to set the font weight to bold we are going to set the font size to uh let's say 1.5m and the line height will be set to 2m and we will give it a background of gray and then finally a border that is one pixel oops sorry one pixel and it's going to be dark gray and it's going to be solid and then the last thing I want to add is a class of hide and this is is how we're going to hide the answers okay so this class is just going to be display none all right so that looks good from what I can see so if we save that and go back and look at our our um actually you know what we want to do we want this here to be border bottom we don't want to border around the whole thing okay so now we can see all our answers which which obviously we don't want font but we can see that the styling is complete the the questions have the dark gray and the large font so that's what we want so the next thing we want to do is to just add the jQuery and what I'm going to do is actually download jQuery and you can use jQuery jQuery one or two I'm going to use the latest version of one which is 1.1 10.2 so I'm just going to copy all of it and I'm going to go into my jquery.js file that we created and just paste all that save that and then we don't have to touch that again so here we want to of course include it so we're going to open up a script tag SRC equals jquery.js uh and we'll say type equals text SL JavaScript and then we need a closing script tag all right so now that that should be working fine now let's open up the console just to make sure and reload and we're having we're getting no errors so I assume that jQuery is being loaded fine all right so now for the actual jQuery we're going we're going to open up some script tags and you definitely want to make sure that these script tags are are opened under the inclusion of the jQuery file this won't work if you have your script tags up here so just make sure of that um and the way we're going to do this is what we're going to make it so this loads after the Dom after the entire document loads so we do that with the dollar [Music] sign document. ready and we're going to do a function this is a self-invoking function all right so what we're saying here is when the document is ready we want to call this function which right now does nothing we're going to um add what we want it to do now once the the document's loaded so what I'm going to do is use a selector um one second let me just all right so in jQuery we use the dollar sign and then some parentheses and quotes and inside that we can put any selector that we want um for now what I want to do is grab all the list elements that have a class of a so all I have to put in here is li. a just like as if we were styling a CSS adding some CSS to it all right so what I want to do is I want to hide all the answers if we look at our page you can see we don't want all these answers showing so we can do that by adding the class called hide that will just that's set to display none so let's do that let's do dot add class and inside here we want the name of the class which is hide all right so if I save that and then we reload this oh I must have did something wrong uh let's see document ready li. a. addclass hide oh we forgot to put the semicolon at the end here all right so that should work or not huh not sure what's going on here make sure the jQuery is there yep hide you guys probably see it before I am before I do oh we have actually have parentheses here in instead of curly braces okay feel like an idiot all right so now we can see that all of our answers are hidden now we don't want this if we look at our original that's not the original if we look at our original document or script you can see when we open it the first answer is showing so that's what we want to do here we want to get the first answer to show and we can do that using the filter function or filter action so we want to say instead of just add doing this add class here we want to add filter okay so in here is what we want in here is what we want to add the hide class to and that is to all of these all of the answers except the first one and we can do that using the nth child so we can say nth child parentheses and then n + 4 so if we save that that's not right filter n [Music] child I'm sorry we need to have a colon before the nth all right so now you can see the first one is shown and this is a little hard to explain but what we're doing here with nth child uh what we're doing is we're going to the parent of this selector okay so the parent of this Li Class A is the UL tag okay and what we're doing is we want to choose we want to choose after the four element from the parent okay so we have the parent and then we want the fourth down 1 2 3 four and this is where it starts this is where that add class hide is going to start and it's going to do it for the for from here on so from here on anything with li Class A is going to have the hide class applied to it so that leaves this first one open so we can see it I know that might be a little tough to wrap your head around um I suggest doing some research on nth child and some of the other pseudo classes and stuff like that but that's how we get that effect so the next thing we want to do is make it so that when we click on these questions um we get they slide up and we can see the answer and we can do that if we just go down here and and we want to say we want to grab the UL class I'm sorry the UL element and we want to do do on on click we could also just do dot click here and as opposed to dot on and then click um but I just I prefer to use on because that's actually how it's used in the jQuery file if you look in the file even if you use click it actually is using Theon function so click and then the next parameter is what we want to click on and that is the LI doq element that's the question so we want to click on the questions for something to happen and that something is going to be a self- calling function all right so what this is saying right here is that when we click on a question we want this function to run which is is nothing right now we're going to add to this right now so we want to say um this referring to the LI doq that we're clicking on do next and the do next is basically just the next element so when we click on the L class Q we want the next which is the LI Class A all right and this is called chaining doing we're going to go from this to next and then here we're going to say do slide down so this is chaining that it's basically do syntax so slide down and that takes a parameter of the speed we want which we'll say 200 all right okay so now we want the siblings of the siblings of li. a we want those to slide up at the same speed 200 okay and you can see when we chain like this we don't need a semicolon at the end of every state statement all right so now let's test this out I'm going to save this and reload we have no errors in the console which is good I click on a question and the answer comes slides up or the question slides up and you can see I can go back and if we get rid of the siblings here we'll get a different effect it doesn't it doesn't stay the siblings need to also move move down all right so that's a very very simple FAQ slider um you can see we only have a few lines of jQuery here very easy um I think it's a it's a nice little script for a beginner um I'll be having some I'll be creating some other jQuery tutorials as well maybe a little more in-depth than this but um I hope you enjoyed the video and I'd appreciate if you could subscribe thanks