Accordion (HTML, CSS and JavaScript)

hey what's up coders hope we are doing well today we're creating an accordion which is a component that organizes content within collapsible items accordions allow the user to toggle between hiding and showing blocks of content with a single click thus greatly enhancing the user experience in our example we are using the accordion for the frequently asked questions part of our page so the visible part of the accordion is the question and the hidden or collapsible part is the answer as usual we are creating this component from scratch with HTML CSS and vanilla JavaScript as an alternative to using some framework I hope you guys will enjoy this video don't forget to share like subscribe if you have any questions feel free to drop them in the comment section below and I will respond accordingly ok let's go [Music] so this is our starting point in the project folder I've created three files they index dot HTML style dot CSS and the main dot J's files in the index.html file it had some basic html5 code and by the way the code editor our music is a visual studio code editor I inserted the title and linked the external files to the document the style dot CSS and the main dot jes files both of them are currently empty notice that instead of placing the script in the body right above the closing body tag I placed it in the head using the defer attribute and we cannot proceed to defining the mark-up for the body let's start by adding an h1 heading F a Q frequently asked questions and the next let's create the accordion for this purpose let's use a div with a class accordion this will be the accordion element which will contain the collapsible items each collapsible item will be a div with the class courti on item which in turn will consist of two parts the visible part this will be a deal with a glass accordion item cheddar in our specific example it will contain their question and the hidden or collapsible part this will be a div with the class accordion item body and in our specific example it will contain the answer so this is the main structure and of course we can add any number of accordion items alternatively it would also totally make sense to use an unordered list as the accordion element and list item or accordion items or we could even create a code and code native HTML accordion using the detail stack combined with the summary tag so within the summary we would include the visible part in our example the question and outside of the summary but still within the details we would include the hidden or collapsible part in our case the answer as usual there are many ways to approach the problem each approach has its advantages and disadvantages now back to our implementation let's add content to the accordion item header this will be a question let's say what is web development and we are done with the header regarding the plus and minus symbols we will add them using the CSS before or after pseudo element over the accordion items header and finally let's also add content to the accordion item body but instead of directly inserting the content here let's include it within a div or could be a paragraph doesn't really matter with the class accordion item body content this will be the last level I promise and the reason we are doing this is because in order to animate hiding and showing of the accordion item body we will use the max height property over it which will not work as intended if we are padding so in order to have flexibility in adding padding we are using this additional container element for the content okay let's add the content which will be the answer to this question I will just paste it and for now let's add one more accordion item question will be what is HTML and the answer once again I will paste very nice let's save and before proceeding to styling with CSS let's open the project in the browser or this purpose I'm using the live server which is a Visual Studio code extension so this is what we've created up to this point and let's move on to CSS for starters I will paste some general styling not directly related to the main objective of this video so we are importing the monserrate phone family from Google phones setting margin and padding to zero and box sizing to Porter box for all elements or the body who specify the font family background color and color and for the h1 heading we said text align to center margin - - areum for top and bottom and zero for left and right and the font size to 2.5 REM I think the default font size for an h1 heading is to REM actually it is 2 a.m. in general I prefer using REM so that sizing is only relative to the route font size which usually is 16 pixels makes things less complicated but again each approach has its pros and cons and now let's tie the accordion starting with the accordion element which contains everything else let's set its width to 90% of its container elements width in this case a body but we don't want it to get wider than 1000 pixels so let's set marks width to 1000 pixels and let's also set margin to to REM for top and bottom and auto for left and right in order to horizontally center it next let's style the accordion items and let's start by setting their background color to white color - very dark gray almost black let's also add some margin 1 REM Tobin bottom and 0 left and right and let's also round the corners a bit by setting Porter radios 2.5 REM we could also add box-shadow with zero pixels horizontal offset two pixels vertical offset five pixels Blair and zero spread Allah will be RGB a 0 0 0 + opacity point 25 nice it is quite subtle since background color is dark if for example it was white then it would be more obvious we could make the box shadow a bit more intense for example by setting capacity to 0.5 let's also increase vertical offset to 4 pixels and Blair to 8 here we are just a matter of preference personally I prefer box shadow to be a bit more discreet next let's style the header of each accordion item and let me paste this part in order to save some time and quickly go through so we are setting padding 2.5 REM for top and bottom put three REM to the right so that we give some space to the pseudo element containing the symbol and one REM to the left we also set minimum height to 3.5 REM lying height to 1.25 REM so if for example question extended into two lines then the total height of the header would be 2.5 plus 1 which equals the minimum height in other words this way when sure that if question takes up to two lines then the height of the header will be the same otherwise of course it will expand to fit the content we also set font weight to bold display two flags and align items to Center in order to vertically Center its content position to relative since we will absolutely position the pseudo element relative to the header and cursor to pointer now let's add the symbol with the help of the after pseudo-element notice the use of double colon notation in order to distinguish between pseudo elements and pseudo classes this was introduced in css3 so for backward compatibility browsers also accept single colon notation okay and now let's set content to the plus symbol here we are and let's increase font size who to REM nice but instead of directly inserting the symbol here in order to ensure consistent representation let's use the CSS entity code there are of course many places you can find the CSS code for the entity you are looking for one such a place is a w3 schools website CSS entities and here's the URL and a table containing the character CSS entity and name so for example let's search for the plus sign here we are and this is the CSS entity code zero zero to be and now let's position the element so let's set position to absolute here it is but we want to place it to the right so let's set right to one REM nice I'm okay with that now when the accordion item is open the active class will be added to the accordion item header thus changing the currently displayed symbol from plus to minus so let's do this you so whenever the active class is added to the accordion item header the content of the pseudo element will change from plus sign to minus sign and of course whenever the active class is removed content will change back to plus sign okay let's check whether these works by adding the active class to the accordion item header of the first accordion item and indeed we get the minus sign by removing the active class we get the plus sign and so on but sooner or later we will have to use JavaScript in order to toggle between adding or removing the active class to the accordion item header upon a click event over it so why not let's do it now let's select the accordion item headers and store them into a variable you next we want to look through each accordion item header of the note list containing all accordion item headers and add an event listener for the click event you and whenever an accordion item header is clicked we want to toggle between adding and removing the active class to it okay let's check the result if I click on the accordion header indeed the active class is added and we'll get the minus sign if I click again the active class is removed and we'll get back the plus sign very nice now let's move back to our CSS and just in order to stimulate your creativity let's quickly go through a couple of alternative ways we could use in order to show whether the accordion item is open or not for example we could use their transform property in order to rotate the element by 45 degrees when the active class is present nice and we could even smooth and their transition by setting transition or their transform property point two seconds duration and is in out timing function okay so this is an alternative implementation we could of course use some other symbol for example this is a black triangle pointing down and let's rotate it by 118 degrees when it is active nice and we could rotate it anti-clockwise if we wanted so there are many ways you could go about this feel free to create your own special implementation now back to our main example let's continue with styling the accordion item body which also contains the accordion item body content but for now let's include everything in the body so let's set padding to 1 REM lying hide 21.5 REM and we somehow want to have a more clear visual separation between header and body one way we could do this would be by changing background color or even font color but instead let's add a horizontal line separating them for this purpose we will use the border top property and set it to one pixel solid and let's use the body background color and I suppose we could increase border width to 3 pixels looks ok but we could make things a bit more interesting by using the linear gradient CSS function for the color for this purpose we will use the border image property which is actually shorthand property for a bunch of other properties the linear gradient function refers to the border image source property and we will also set the border image slice property to one in order for this to work since it prevents the default slicing of the image into sections so let's set the linear gradient a while ago I've created a video explaining in detail how to use the linear gradient function I will include a link in the description feel free to check it out so direction will be too right Green will be the starting color and yellow will be the ending other and if we save it doesn't work and that's because we didn't set the border image slice to one so let's do this very nice or we could for example start with the body background color and end up with transparent or we could start with ants parent get to the body background-color Midway and end up with transparent there are literally countless combinations feel free to experiment and I prefer 1 pixel border width instead of 3 now if we didn't want to animate the opening and closing of the body we could simply set its display property to none and whenever the active class is present over the accordion item header said they display property for the adjacent accordion item body to block as simple as that however if we want to animate this we can't use the display property one way to approach the problem would be by using the max height property and initially setting it to 0 and overflow to hidden however this way the padding over the body is still visible as well as the porter for these papers we will move this part into the inner div the accordion item body contact nice and let's set transition for the max height property with point two seconds duration and is out timing function okay now it would be nice if we could for example set the max height property to auto when the active class is present however this wouldn't work we could make an assumption for marks height for example if we don't expect the height of the body to exceed 200 pixels we can set it to 200 this sort of works however by increasing the max height assumption animation keeps getting worse you so we can't really rely on this one and therefore you guessed it javascript comes to the rescue let's go up to this point we toggle the active class over the accordion item header next let's access the adjacent sibling accordion item body and store it into a variable for easy access for this purpose we will use the next element sibling property over the accordion item header next we want to check whether after toppling accordion item header has the class active and if the active class is present over the accordion item header we want to set the max height of the accordion item body and by the way notice the use of comment case here since in JavaScript hyphens can be mistaken as subtraction attempts so we want to set max height to accordian item body dot scroll height plus PX the scroll kite property returns the entire height of an element in pixels including the height that is not viewable due to overflow and if activeclass is not present we want to set max height back to zero and that should be it let's check the result looks nice and smooth also no errors in the console I think it already looks quite good in smaller screens maybe we could reduce the root font size a bit which in turn will affect all related styling the styling with their REM units so let's do this for browser window width up to 767 pixels the following styling rules apply we will only change the root font size to 14 pixels okay and let's add a few more accordion items and check the result you very nice we are actually done but before wrapping it up let's quickly go through an alternative implementation in which the accordion allows for the display of only one collapsed item at a time for example if the first accordion item is open and we click on the second accordion item then the first item will automatically closed leaving only the second one open so let's move back to our JavaScript and before executing this process for the clicked accordion item we first want to check whether some other accordion item is currently open and if yes to close it you so we are selecting the accordion item header which currently has the class active and storied into the variable currently active accordion items header and I'm probably being a bit over descriptive here and we then want to check whether indeed such an element exists and if yes we also want to ensure that it is different than the clicked element because the process for the clicked element is executed here in this case we want to remove the active class from this element the token method here will always remove the active class since it will always be present so alternatively we could use the remove method and we also want to set max height for its body to 0 so let's use this property to get the body and let's copy-paste this to set max height to zero so we are doing it in one step instead of two we are actually skipping the variable creation part okay I think this should do the job let's check the result very nice okay guys let's leave it here I hope you enjoyed this video and got some value out of it if you did please hit the like button and share it with anyone who might be interested also don't forget to subscribe if you want more I would love to hear your thoughts in the comments section below until next time keep coding keep improving and enjoy the journey take care I

Channel: Coding Journey

Views: 26,195

Keywords: accordion, accordion menu, faq accordion, collapsible content, accordion with html css javascript, accordion html, accordion javascript, accordion css, accordion component, accordion web development, accordion html css javascript, accordion html css js, collapsible accordion, collapsible javascript, collapsible content html, accordion menu html, web component, how-to, html, css, javascript, tutorial, web tutorials, web development, front-end tutorial, ui, ux, coding, coding journey

Id: dr8Emho-kYo

Length: 27min 45sec (1665 seconds)

Published: Sun Jan 05 2020