Your content goes here.
Your content goes here. Your content goes here. |
Your content goes here. Your content goes here. Your content goes here. |
Accordions
Accordion using details
Who is Eamonn?
A guy from TN who makes content on the internet.
What kind of content does he make?
He focuses on productivity tips using coding and spreadsheets. He makes YouTube videos and writes articles on freeCodeCamp, LinkedIn and his personal newsletter.What does he do for fun?
Hangs out with his wife and four kids, and runs ultramarathons.Accordion with some JavaScript added
What's the difference?
We're adding JavaScript to these three.Why add JavaScript?
We can make it so only one panel can be open at a time.Try clicking each of these
See how one closes as soon as the other opens?.Responsive Text
Resize the browser window to see how the text size scales.
Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.
Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.
Accordion with symbols
In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.