Accordion (HTML, CSS and JavaScript)
Learn how to create an Accordion, which is a component that organizes content within collapsible items, with HTML, CSS and JavaScript.
Accordions, allow the user to toggle between hiding and showing blocks of content with a single click, thus greatly enhancing the User Experience (UX) of your project.
In our specific example, we are using the Accordion for the Frequently Asked Questions (FAQ) part of our web page. So, the visible part of the Accordion is the question and the hidden (or collapsible) part is the answer.
As usual, we are implementing this component from scratch, with HTML, CSS and Vanilla JavaScript as an alternative to using some third-party library or framework for this purpose.
Enjoy 🙂
Don’t forget to share, like, subscribe and I would love to hear your thoughts in the comments section below!
Code for this Project: codepen.io/Coding_Journey/pen...
Support the Channel 💙☕🙏
PayPal: paypal.me/CodingJourney
Suggested Videos:
Modal with HTML, CSS and JavaScript: • Modal with HTML, CSS a...
CSS box-shadow Editor: • CSS box-shadow Editor
Simple Auto-Playing Image Slideshow (HTML, CSS and JavaScript): • Simple Auto-Playing Im...
Colorful Background with linear-gradient: • Colorful Background wi...
Slide-In Overlay Hover Effect (HTML & CSS): • Slide-In Overlay Hover...
Decide - Create - Publish - Repeat: • Decide - Create - Publ...
Codepen: codepen.io/Coding_Journey/
Twitter: / codingjrney
Email: codingjourney123@gmail.com
Subscribe 💖
/ @codingjourney
Пікірлер: 225
Thanks to your video this seems to be very easy to do. Clear explanation, fast and straight to the point plus extra tips presented. Very cool!
Thank you so much for the details, dude. Your explanations of certain ins and outs such as what exactly scrollHeight does in the code were crystal-clear!
You explaind it very well and also gave alternative ways of doing this. Ive found this only on your channel. Best job! Thank you😊
That smooth transition on the max-height property instead of using display none/block was amazing. Thanks a lot
@CodingJourney
3 жыл бұрын
Oh thanks mate! Very glad you liked it 🙂
Awesome example. Very useful explanations at every coding step.
One of the best FAQ Accordion tutorials on KZread! Thank you!
@CodingJourney
3 жыл бұрын
Thanks man! Glad you liked it 🙂💙
This is exactly what I needed! Thank you sir
Thank you kindly for the code! It helps me a lot :D
Absolutely awesome tutorial; I have been trying to do this for at least a week before I found your video. Thank you so much!
@CodingJourney
3 жыл бұрын
Oh thank you for the lovely comment!! Huge love 💙💙🙂
Great code, thank you for sharing this!
wow , I just learned a lot from this one video, css entities, border images, and accordion itself, thq for explaining everything in detail, its soo helpful , subbed
@CodingJourney
3 жыл бұрын
Oh thank you for the lovely comment!! 🙏 Very glad you found this useful 🙂 Welcome aboard, keep coding!! 😉
So now I've also taken the time to watch your tutorial. Again really well explained. I like it very much that you show many different ways for one thing to implement it. I have never used CSS Entity codes. It's a fantastic alternative. Keep it up. You're a hidden gem in all of these many developer channels.
@CodingJourney
4 жыл бұрын
Thank you so much for the lovely words Mario!! And thanks for taking the time to watch...despite the fact that you already knew how to create awesome accordions 😉😁 I've watched your accordion menu with Vue JS video and loved it 🙂 Keep it up bro!!!
You saved my day bro... thanks
You did everything i wanted, im really thankfull, one of the best at frontend
@CodingJourney
3 жыл бұрын
Very glad to hear that man! Thank you for the lovely comment 🙂💙
1000x thank u from germany - really a high-end tutorial!
@CodingJourney
4 жыл бұрын
Oh thank you for the lovely comment 🙂 Warm greetings to Germany 💙
Totally loved it. Thank you so much for giving many ideas in the process. Efficient and effective way, Sir!
@CodingJourney
2 жыл бұрын
Amazing! Totally my pleasure 🙂💙💙
i just found the best teacher on the internet !! explaining so smooth like to 5 year old ! and its free man God bless you ! make more content
@CodingJourney
2 жыл бұрын
Heh! Thank you for the lovely words 🙂 Many amazing teachers out there, tech community is the best 🙂 Keep coding!! 💙
Thanks, very clear and useful
This is what I was looking for. Thank you 3000 ❤ *You own a New Subscriber* 👍👌
@CodingJourney
3 жыл бұрын
🙂 Amazing! Very glad you liked this 🙂 Welcome aboard 😉💙
meeen i have been searching for the teaching like this for almost 2 days i can to find now, this video is very clear directly informative
@CodingJourney
2 жыл бұрын
Thanks mate, totally my pleasure 🙂💙
You got a new subs :) You are helping a lot of coders. Keep doing the great work!
@CodingJourney
3 жыл бұрын
Oh thank you for the lovely comment! 🙂 Welcome aboard 😉 You too, keep coding!!
Fantastic tutorial. I appreciate how you showed alternative solutions. Hope to see more content like this in the future.
@CodingJourney
3 жыл бұрын
Thanks man, glad you liked it! I'll try 😉
excelente tutorial!
Thanks brother. After a long time coding I got one amzing hint from your works. Thanks a lot it took me 4 year to get to this one hint.
@CodingJourney
2 жыл бұрын
Oh my pleasure 🙂 4 years of coding already...amazing!! Keep coding 😉💙
Thank you so much for this tutorial! That's exactly what I wanted!
@CodingJourney
4 жыл бұрын
Excellent! Very glad to hear that 🙂💙
Enjoyed the explanations and different examples of what you could do! 10/10
@CodingJourney
4 жыл бұрын
😊 I would be somewhat satisfied with 6 or 7...but a 10...wow! 😉🙂 Thanks for the lovely message man, very glad you liked it!!
sweet thank you for explaining with so much depth!
@CodingJourney
4 жыл бұрын
🙏 Very glad you liked it!! 💙🙂
You are amazing! Thank you very much for your clear explanation!
@CodingJourney
2 жыл бұрын
Oh thank you! You are amazing 😉 Keep it up, take care!! 💙
Wow this is a pretty descriptive way of making an accordion.
Well done and to the point
The best video, this was what I was looking for 10/10. At first, I hesitated on but after watching half of it I knew this was the video I was looking for Thank you :)
@CodingJourney
2 жыл бұрын
Oh thank you for the lovely comment! 🙂 My pleasure, very glad you liked it!! 💙
Wow, you explain everything so well! Thank you, awesome Video! :D
@CodingJourney
3 жыл бұрын
Oh thank you for the lovely comment 🙂 Very glad you liked it! All the best, keep coding!! 😉
Great video! Thanks
Outstanding man after watching the whole video I understood why this tutorial is so long. great great content plz keep doing it. Your channel has been subscribed.
@CodingJourney
3 жыл бұрын
Oh thanks for watching and for the nice words!! Comments like this one definitely encourage me to keep going 🙂 Thanks again, welcome aboard 😉
Good job, I also love the explanation and showing the different techniques. Your method of teaching helps me grasp the concepts and fullers my understanding.
@CodingJourney
4 жыл бұрын
So very glad to hear that! Thanks for the lovely comment 🙏🙂 Keep it up!!
Such a great explanation. With good and bad ways to do same thing and why they don't work. I needed this
@CodingJourney
3 жыл бұрын
Oh very glad this was helpful 🙂 All the best, keep coding!! 😉
Wonderful tutorial mate! Thanks 🧡
@CodingJourney
4 жыл бұрын
Thank you mate 😉🙂
Amazing step by step presentation! Appealing to all levels of learning. Thanks so much for your time and effort you've taken to present this knowledge and information to us! Like and Subscribed! May the KZread algorism gods treat you well!
@CodingJourney
2 жыл бұрын
Oh thank you for the lovely comment, much appreciated 🙂 Very glad you found this helpful! Welcome aboard, may the Entrepreneurship gods be with you 😉💙
Simple functions and clean code, perfect for beginners.
@CodingJourney
2 жыл бұрын
Oh thank you, glad you think so 🙂💙💙
I love it!!! This tutorial helps me a lot You have no idea Thank you for this simple and didactic video
@CodingJourney
2 жыл бұрын
Oh thank you for the lovely comment! Very glad this was helpful 🙂 All the best, keep coding 😉💙💙
Finally i find my accordion and that's the reason I subscribed your channel
@CodingJourney
3 жыл бұрын
🙂 Very glad you liked it! Welcome aboard 😉💙
Thank you so much for explaining your work. I really like how you provided a quick glimpse of the alternative ways of doing one thing. I think if you found a way to do that more often, you might be standing out from the other webdev tutorial channels. Thats just a thought I had. It really helps me to know that there are other ways to accomplish one thing. even if it does add more explanation and editing time. I certainly appreciate it even if others do not. If you're not already, I can see you being on udemy in no time. Oh and I dunno if this works for you, but for me, I find that ident-rainbow for vscode helps me keep track of the div layers. Anyway thanks again!
@CodingJourney
4 жыл бұрын
Hey man! Thanks for the nice words and suggestions and feedback 🙂 I like what you are saying, it fits my style 😄 There is a trade-off however...longer videos! So it's a constant struggle to find a balance 🙂 Thanks again for the lovely comment! Best regards!!
@kylencannon1524
3 жыл бұрын
a trick: you can watch series on kaldrostream. I've been using them for watching all kinds of movies recently.
Very well explained. Just subscribed. Please keep creating content like this.
@CodingJourney
4 жыл бұрын
Oh thank you, very glad you liked it!! Welcome aboard 🙂💙
Thanks❤️❤️buddy love you explaining it was very useful content for every 🔰 beginner developers
@CodingJourney
2 жыл бұрын
Oh thanks mate, my pleasure 🙂 Keep coding 💙💙
Underrated! This made me subscribed.
@CodingJourney
3 жыл бұрын
Oh thank you mate! Welcome aboard!! 💙🙂
BRO YOU ARE AWESOME THANK YOU SO MUCH I LOVE YOU GOD BLESS YOU MAN
@CodingJourney
2 жыл бұрын
Oh thanks for the lovely message bro! Huge love 💙💙🙂
if i want the fast collapse to be open?? what should i do in your js code ?? please tall meee......
Great tutorial. Thank you.
@CodingJourney
3 жыл бұрын
My pleasure 🙂 Glad you liked it!
well done!
Hi! Thank you so much for this explanation. I have a problem when I want to convert this code suitable for displaying sub-accordions. That is, ul tags inside li tags. Is it posible?
Thank you, this was exactly the solution I was looking for. That is, how to animate the accordion. Thank you very very much
@CodingJourney
Жыл бұрын
Super! My pleasure 🙂💙
Love the explanation!! Thank you so much. One minor alternative could be since you are anyways using display:flex, you could add justify-content: space-between to header and not worry about position relative to parent and absolute in header::after :)
@CodingJourney
3 жыл бұрын
Excellent suggestion 👍 Simplifies things and works just fine!! Thanks so much for sharing 🙏 That's why coding community rocks!! 😉💙
@anshulmanapure1980
3 жыл бұрын
I would appreciate if you would explain it a bit more. I dont understand it fully, but I would like to. Thankyou
I really loved your explanation. Thank you so much. I've subscribed to your channel. Look forward to see more and more videos from you. 😊
@CodingJourney
4 жыл бұрын
Oooh thank you for the lovely comment!! Welcome aboard 😉💙💙
@ousssikavf4276
4 жыл бұрын
you can also see here, how i create Another Awesome Accordion with html , css and javascript ( kzread.info/dash/bejne/c4SXqcNqhKW5eaQ.html
This video is clearly outstanding, thanks for the video. But I've recently learnt JS and I am having hard time understanding the toggle function you created. At 13:56, In forEach() method are you declaring another function named accordianItemHeader?
The video is beneficial. the whole content is adequately explained. thank you.
@CodingJourney
2 жыл бұрын
Oh thank you 🙏 My pleasure!! 🙂💙
Thanks for the tutorial and i have a question. I liked the option without height, and is it possible to make one item open by default, how to do it in js??
Great explanation about this topic
@CodingJourney
Жыл бұрын
Thanks mate, glad you liked it!!
For the same video can you add accordion inside accordion or nested accordion
Awesome, Subscribed.
@CodingJourney
3 жыл бұрын
Amazing!! Thanks man, welcome aboard 😉💙
Bravo, good job, merci 👍👍👍
@CodingJourney
2 жыл бұрын
Oh thank you, my pleasure 🙂💙💙
This really helps and is the tutorial that I've been looking for!! Thank you sooo much! Btw I've got something confused. I don't understand why 26:28 using 'toggle' instead of 'remove' Could you please explain more about it🥺
This tutorial is Gold.
@CodingJourney
3 жыл бұрын
Oh thank you 🙏🙂 Very glad you liked it!! 💙
finally! coding that works! simple and effective! Thank you! Please are you able to help me with using VS-CODE to upload a site to a hosting site?
Thank you so much!! Exactly what i'm looking for. Please make a tutorial about modals thanks a lot.
@CodingJourney
3 жыл бұрын
My pleasure, glad you liked it!! I did make a tutorial about modals: kzread.info/dash/bejne/i3WGu7WEqbbdmMo.html hope it helps 🙂 All the best, keep coding!!!
thank you so much! you've helped a lot!
@CodingJourney
Жыл бұрын
Super! Very glad you found this helpful!
@wulanamandadeviniluh2527
Жыл бұрын
@@CodingJourney one question, how can I display 2 items in the javascript? In my case I'd like to display item content & item note. Thanks before
I am using Dreamweaver to create this accordion, but on 14.4 min it gives me error when I enter const in main.js, please advise. Thanks
Please how did you do this *.accordion-item-header.active + .accordion-item-body* Is there a special way you added the + symbol to the syntaxI tried and it’s not working . Please help
thanks a lot !! great explenation and very clear code - i will use it for sure appreciate the open source and surly i will credit you in my code :-)
@CodingJourney
3 жыл бұрын
Oh thank you for the nice words! Very glad you found this useful 🙂 No need for credit! I'm just happy to help fellow coders!!! All the best, keep coding!! 😉
Thank you 👍 It is very simple and very effective code.
@CodingJourney
3 жыл бұрын
My pleasure 🙂 Glad you liked it! All the best, keep coding 😉💙💙
Thanks for spreading the knowledge mate! Every new video is better than the last. I wish I could say the same about you jokes. 😜
@CodingJourney
4 жыл бұрын
Ahahahahah!! What a joker 😂😉 Huge love man 💙💙🙂
thank you!!! good video.
@CodingJourney
3 жыл бұрын
My pleasure 🙂 Glad you liked it!! 💙
so far this is the most detailed tutorial i have ever seen. Thank you so much i have learn a lot from this tutorial. please make some more informative step by step tutorial videos.
@CodingJourney
Жыл бұрын
So glad you liked this! Totally my pleasure 🙂 All the best, keep coding!! 😉💙
@neowisetv9044
Жыл бұрын
@@CodingJourney sir can you make a step by step video of making a carousel/slider using html css and js. Thank you so much in advance.
You teach in detail better than my current bootcamp teacher, how ironic 😅. I’d have just paid you instead to upload more educational contents
@CodingJourney
8 ай бұрын
Oh thank you so much for the kind words! Really appreciate it 🙏💙💙 All the best to your web dev journey, big love!!
Thank you very much for this video.
@CodingJourney
3 жыл бұрын
My pleasure 🙂 Glad it was helpful! Keep coding 😉
Excellent man! Justly I was looking for, I had the same problem about the large max-height defined in css, too fast for small items. Thanks!
@CodingJourney
3 жыл бұрын
Amazing! Very glad you liked this! Thanks for the lovely comment 🙂
@davidarias9175
3 жыл бұрын
@@CodingJourney Hey man, What would you do if the content scrollHeight changes after open? For example, if the accordion's content have dynamic elements that appears and dissapears so the height keeps changing. PD: I'm trying to solve that problem in react 😥 so I don't think I can use custom event listeners
@CodingJourney
3 жыл бұрын
Hey man! In that case you should readjust the max-height accordingly. For example when the dynamicElement shows up: accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + dynamicElement.scrollHeight + "px"; Hope this works. Unfortunately it would be a full-time job for me to provide full support to all questions to all the projects I've uploaded so far (without the salary part 😁). The main purpose is to get you started so that you can go ahead and experiment and find solutions to your specific cases! All the best mate, keep coding 😉
@davidarias9175
3 жыл бұрын
@@CodingJourney Thank you so much! I'm going to try to adapt that logic. My best whishes for your channel. 🥇
Dude, you just made my day! Thank you very much, it was really helpful. Also, i really liked the way you presented more than one way to design the menu (like the "+" and "-" icons, or the up and down point arrow). It was exactly what i was looking for and this vid helped me a lot. Thanks again!
@CodingJourney
3 жыл бұрын
Oh thank you for the lovely comment 🙏🙂 Very glad you liked it!!
Thank You! You got a new subs.
@CodingJourney
4 жыл бұрын
Amazing! Welcome aboard 🙂
hi , when you click on "+" more than one could be openned
Finally an accordion I can understand and feel good about. One question, how to display first accordion open by default. I added an additional class '.first' to '.accordion-item-body' and used 'overflow: visible' in the CSS which shows it but doesn't push the content underneath it down. Thanks!
@CodingJourney
4 жыл бұрын
Hey! Glad you liked it :) One way to go about it would be to simulate a click event over the first accordion item with JavaScript. So after adding the event listeners, you could add the following at the end of the .js file: accordionItemHeaders[0].click(); That's all! This way, however, accordion item will open with the animation/transition. I would be fine with this, but it's a matter of taste :) If you don't like this, you could temporarily set transition-duration to 0 for first accordion item and restore it back to 0.2s, or, instead of simulating a click event you could take the following approach: 1. In HTML add the active class to accordion-item-header: 2. In CSS: .accordion-item:first-child .accordion-item-body { max-height: initial; } 3. But max-height for first accordion item should be set in pixels so that animation works the first time we try to minimize it. So in JS: accordionItemHeaders[0].nextElementSibling.style.maxHeight = accordionItemHeaders[0].nextElementSibling.scrollHeight + "px"; Hope this works for you! There are always many ways to approach a problem so feel free to differentiate if you come up with a solution that makes more sense to you :) All the best!!
@matj5285
4 жыл бұрын
@@CodingJourney This works a treat. I used the first approach you outlined, and agree it does look good animated as visitor enter the page
@matj5285
4 жыл бұрын
Can a border added to accordion-item-body be made so it's not visible when the accordion is collapsed? It's appearing as a slight bottom border added to accordion-item-header, which is the top and bottom border of accordion-item-body.
The best explanation of all that I wanted to know, thanks a lot ಥ‿ಥ
@CodingJourney
2 жыл бұрын
Oh thank you! My pleasure 🙂💙
How can i join the the training program ? as a trainee
hi bro are it is possible to make a javascript to auto click on randomly link if visitor come from a specific website or website any page like gooogle.com or google.com/search _result or any blog.com or blog.com/anypage
best video ever
Thank you for another vanilla javascript project. Will you consider doing a responsive image gallery tutorial? I'm envisioning a site that, on mobile devices shows only five or six images, with the number of images going up as the screen/ device sizes go up. But I cannot decide if Flexbox or Grid would be the best choice for this project.
@CodingJourney
4 жыл бұрын
Hey man thanks! I will consider but currently there are at least 150 topics in my list I'm also considering 🙂 and given my production rate...I don't know, this could take a few years 😂 You could go either way (Flexbox or Grid)... in general, Flexbox is for laying out items in a single dimension - row OR a column and Grid is for layout of items in two dimensions - rows AND columns. So, accepting that current browser support for CSS Grid is good enough, grid seems to me a bit more reasonable choice for image gallery. All the best man, have a great year!! 🙂
very nice explanation! however, would be cool if you could also explain for noobies, for example, why do u use '=>' or 'event =>', that was some sort of questions that would be cool to make clear
@CodingJourney
2 жыл бұрын
Glad you liked it! Usually I get the opposite...that my videos are too long and I shouldn't get into that much detail 🙂 Thanks for the suggestion though!! I'm always trying to find a good balance! Regarding your question here's a link about Arrow function expressions: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions. Doing great mate, keep coding!!
Dude, great vid just at the time when i am re-learning HTML5 and CSS, i mean i am in bootstrap rehab.
@CodingJourney
4 жыл бұрын
Heheh amazing! Very glad you found this useful 🙂 I've been Bootstrap-free for the past 21 months 😋😁 Totally skipped V4, but now that jQuery is out of the way, maybe I'll give V5 a try...I just hope I can control it this time 😁😉
@luisestebanruiz9773
4 жыл бұрын
@@CodingJourney i think that is unnecesary, BST is open source, so you can scrap into the main CSS and JS , SO you have a base in order to code your own boilerplate, 90% of the web designs follow certain paths, so you only use the tools what you need. In fact, whit the rise of the JAM stack, and the standarization of the Reactive coding ( React, Angular , Vue), you can control the modularity, so making a little effort, of JS and JSX, you can create your own bootstrap-based components.
@CodingJourney
4 жыл бұрын
Absolutely, totally agree! But sometimes it is a quick and convenient solution...for example if a friend asks you to create a website for him and you know he is not really serious about it, then using a nice Bootstrap template would be a good choice 😁 and of course for quick prototyping! But, overall, I agree, it is definitely not necessary! I think balance, is the key word...we can use it if it makes sense, but we shouldn't be addicted to it 🙂😉
@luisestebanruiz9773
4 жыл бұрын
@@CodingJourney have you ever tried Grapes.JS ? is like a elementor but for serious developers, it makes prototyping way far easier, an you can include your own elements, combined whit another JS technologies , you got super powers, in fact it would be a great challenge implementing this into a wordpress workflow, 'cause WP, now comes whit composer , so is way easier implement laravel into a WP developing enviroment, in fact WP is getting more JS friendly, and Grapes JS , could have a good integration whit LARAVEL, because both have VUE by default.
@CodingJourney
3 жыл бұрын
That sounds promising! Haven't heard of Grapes.JS before, I will definitely look into it. Thanks for sharing!! 🙏💙
can we make accordian table
great thanks so much
@CodingJourney
3 жыл бұрын
My pleasure 🙂 Very glad you liked it!!
thank you so much sir
@CodingJourney
2 жыл бұрын
My pleasure! Glad you liked it 🙂
Well explained as usual !
@CodingJourney
4 жыл бұрын
Thanks man! Glad to see more people appreciating the wizardry happening in the laboratory and joining in 😉 Doing great man, keep it up!!!
thanks
awesome
@CodingJourney
2 жыл бұрын
🙏💙
thank you so much
@CodingJourney
4 жыл бұрын
My pleasure 🙂 Very glad you liked it!!
Thanks Malaka!
@CodingJourney
9 ай бұрын
Hahah! Love it 😂
It is really great and very excellent, but I want for your permission a way to communicate with you. I want to explain to you a simple problem that I encounter when opening the accordion. I hope that you will help me solve it. Thank you
Help! Trying to use this and put images and content in it. I can do it for one accordian item but when i try and duplicate that the images just disappears!
@CodingJourney
3 жыл бұрын
Hey man! You should be able to add any kind of content without any problem! Feel free to send me a link to your project so that I could have a look. All the best, keep coding!! 😉
Subed thank you sir it is really helpful couldn't realize, but i have one more question "how i could add more accordions now i've got 5 different accordions with their answers so how i can add more" i appreciate you're hardworking
@CodingJourney
3 жыл бұрын
Hey man thanks, welcome aboard 🙂 If I understand correctly you want to add more accordion items (each containing a new question and answer)? If that's the case, you simply add more accordion items, e.g. copy and paste an "accordion-item" div with its content and replace the text in "accordion-item-header" and "accordion-item-body-content" with your new text! All the best, keep coding 😉💙
@somtechacademy
3 жыл бұрын
@@CodingJourney yeah man got it, and it really worked! indepth appreciation💙💙💙
Hey, thank you for making the video. I would like to ask, what is the purpose of ' defer' attribute that you use to link the js file? Thanks in advance!
@CodingJourney
3 жыл бұрын
Hey! My pleasure, glad you liked it! When the "defer" attribute present, it specifies that the script is executed when the page has finished parsing. (so that we can access and manipulate the subsequent DOM Elements) Although not exactly the same, you can consider it as an alternative to the more "classic" way, of placing the script tag (without the "defer" attribute) at the bottom of the page, just before the closing tag. Hope this kind of clarifies things 🙂 All the best, keep coding!!!
@debby18ful
3 жыл бұрын
@@CodingJourney thank you for the fast reply! :)
Keep going strong, much love!
@CodingJourney
4 жыл бұрын
My superhero!! 🦸♂️💙🙂
Has anyone else struggled to ensure that the ::after icon in the accordion item header stays vertically central when the header wraps onto two lines? For me, it's great on some browsers but on others (e.g. Safari), the icon moves to the bottom once the text has wrapped
@CodingJourney
4 жыл бұрын
Hey man! Unfortunately I currently don't have access to Safari browser so that I can debug, but I think the following would do the job: .accordion-item-header::after { ... height: 100%; display: flex; align-items: center; } Hope it works! If not feel free to let me know so that I can think of something else :) Not the most efficient debugging, I know, but we adjust ;) :)
@tompain1985
4 жыл бұрын
@@CodingJourney thanks for getting back to me! This was what I also thought of but strangely it moves the icon down to below the header / over the accordion-item-body-content, which I can't understand why. This is only on mobile but on Chrome, Safari and Firefox on mobile and on two different sites that I have tried it on. You can see what I mean here: res.cloudinary.com/packed/image/upload/v1591088320/Screenshot_2020-06-02_at_09.58.08.png Any help would be hugely appreciated!
@CodingJourney
4 жыл бұрын
Again, unfortunately it works fine on my mobile (Android with Chrome browser)...Debugging steps I would take: 1. From what I can see your accordion is part of a more complex component and also using additional classes...so in order to ensure that the problem is not due to styling conflicts, try opening the final project (link in the description). 2. If the problem is still there, I would try the one we tried and didn't work :) 3. Next effort: let's go classic and try also specifying the distance from the top, so: .accordion-item-header::after { ... top: 50%; transform: translateY(-50%); } 4. Hope 3 works (it also works fine on my mobile). There is always the last resort (which we are trying to avoid), to add an extra element in accordion-item-header for the icon (instead of using the ::after pseudo-element)... All the best!! :)
@tompain1985
4 жыл бұрын
@@CodingJourney thank you so much! top: 50%; transform: translateY(-50%); Works perfectly! Your videos are great man, keep up the good work - they are so useful for people learning to code. Thanks again! 🙏
@CodingJourney
4 жыл бұрын
Phew :) Very glad to hear that...I was running out of alternatives ;) Thank you for the very nice words! All the best, keep coding ;) :)