We're going to be making a product card with an image, heading, sub-heading and description elements. Below you'll find the starter HTML and SCSS.

If you get confused along the way, you can check out the finished code here.

Quick terminology break

What is a CSS animation? It's used to gradually change from one style to another. When using animation, as opposed to transition or transform, you need to use keyframes, which contain the different styles that will be applied to the element.

Alright, let's move on to the starter code!

HTML

    <main>
        <div class='card'>
            <div class='product-image'></div>

            <div class='desc-wrapper'>
                <p class='heading'></p>
                <p class='desc'></p>
                <p class='desc'></p>
                <p class='desc'></p>
                <p class='desc'></p>
                <p class='desc'></p>
            </div>

        </div>
    </main>

Note the five p elements with .desc, they can be used to hold product information such as price, color, quantity et cetera. You can use more than one p element to get the multi-line effect, or use a single p that's bigger (to take up more space and have a fluid transition to the actual content) if you're using full paragraphs of text.

SCSS

.card {
    display: flex;
    flex-direction: column;
    width: 325px;
    height: 500px;
    background-color: #fff;
    border-radius: 5px;
    .product-image {
        width: 100%;
        height: 250px;
        border-radius: 5px 5px 0 0;
    }
    .desc-wrapper {
        padding: 5px 25px;
        .heading {
            width: 100%;
            height: 25px;
            margin-top: 25px;
            border-radius: 50px;
        }
        .desc {
            height: 16px;
            border-radius: 50px;
            width: 100%;
            margin: 15px 0;
        }
    }
}

Feel free to adjust the HTML or SCSS to fit your needs, just make sure all elements of the loading effect will be applied to have a height and width property, otherwise they won't be visible until they're filled with content.

Okay, onward to the fun stuff!

We want the product-image, heading, sub-heading and desc elements to shimmer while they're waiting for data to display, so we'll give each of them a .shimmer in our HTML. Now let's define .shimmer in our SCSS and make the magic happen!

I'll start off with the full code for the animation styles, and the finished product will have the shorthand animation property. Below is an example from the previous link. It condenses this:

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

into this:

div {
  animation: example 5s linear 2s infinite alternate;
}

It's a big space saver, but feel free to use the longhand version if you wish!

Our .shimmer will be pretty straightforward, there are a few key features to make it work though.

animation

I named it shimmering, which will be used later for the keyframes. Duration is up to you, I think something between two and four seconds looks best; if you go much longer, the user may not even see the loading effect. Along the same vein, I didn't want a delay. I kept the speed even for the duration, and set it so the animation loops for as long as it takes to load the content. Here's what that looks like in longhand:

  .shimmer {
    animation-name: shimmering;
    animation-duration: 2.1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

and shorthand:

.shimmer {
    animation: shimmering 2.1s linear infinite;
}

We've got our animation, but what is it, y'know, animating?

The background!
... Wait, what?
Okay, a really big background!
...
I'll explain: to make the elements look like they're shimmering, we're going to have an oversized linear-gradient background that will repeatedly move from left to right. Still a little confused? Me too, let's crack on!

background-size

We're going to add a declaration to .shimmer to give us the really big background: background-size: 1300px 100%. The first value of background-size is the width, and we want that to be at least twice the value of the element that this class is being applied to. Why the oversized background? Without it, the shimmer effect will loop much faster and it won't look as nice, like this:

linear-gradient

Now let's color in that really big background with a linear-gradient, this part can be fiddley. You'll need two different colors, light and dark. You don't want too much difference between the colors, or it may not end up looking like a shimmery highlight. The dark color will sandwich the light color, causing the highlight effect.

For best results, keep the highest percentage below 50%, and the difference from lowest to highest less than 30% difference. We want the shimmer to happen at the beginning of the animation, and if the highlight is too far away from the darker colors, it fades out and the effect is quite weak. The example below demonstrates background: linear-gradient(90deg, rgba(226, 226, 226, 1) 9%, rgba(238, 238, 238,1) 48%, rgba(226, 226, 226, 1) 71%). You may need to watch closely to catch the animation, it's quite subtle.

If you need some help creating a gradient, I love CSS Gradient. It's an easy-to-use generator that provides maximum compatibility code. Tip: If you want to add another color to the gradient, simply move your cursor over the long slider bar and left-click where there isn't already a marker.

So we have our really big gradient background (allegedly, we can't see it!) but it's not doing anything. Time to change that.

keyframes

I said our background is going to move from left to right, and it will carry the highlight across the element with this movement. To achieve this, we're going to utilize the background-position. At 0% we want our background to be fully hidden to the left, achieved by using the same width value as our background-size (be sure to use a negative value to move it to the left along the x-axis!). At 100% it'll be in the default place, covering the entire element.

Let's put it all together now

$light: rgba(238,238,238,1);
$dark: rgba(226,226,226,1);

@keyframes shimmering {
    0% {
        background-position: -1300px 0;
    }
    100% {
        background-position: 1300px 0;
    }
}

.shimmer {
    animation: shimmering 3.1s linear infinite;
    background: $dark;
    background: linear-gradient(90deg, $dark 9%, $light 18%, $dark 31%);
    background-size: 1300px 100%;
}

Congrats, you did it! You made a fancy little loading effect! If you followed along, feel free to leave a comment and share a link to your code. Let me know if you have any questions or a suggestion for another tutorial.

When using Netlify, there are several options for a domain.

• Sites are generated with a free sub-domain, no purchase necessary

• Purchase one through Netlify and use their DNS

• Purchase one elsewhere and use the domain name provider's DNS

I'm going to be talking about the latter, specifically with a Namecheap.com domain name.

Let's cover some vocabulary before we get started.

Domain name - a human readable form of an IP address, the destination a user types into their browser.
DNS or domain name system - translates human readable domain names to machine readable IP addresses.
Apex domain - a custom domain that does not contain a subdomain such as example.com. Also called bare, base, or root domain.
Subdomain - a part of another domain, used to organize and navigate to different parts of a website such as blog, store or help. 'www' is a subdomain.

This tutorial is written from the perspective that you already have a Netlify account and a site created. If you haven't done this yet, please visit Netlify.com to create an account and a site first.

Namecheap

Let's get started. Go to Namecheap (create an account if you don't have one), and purchase a domain name. For this example, we'll use my website, achulslander.com.

After purchasing your domain, you'll be directed to your products page. If you've previously bought a domain, log in to your account; your dashboard should come up and show your domain name. Select the manage button.

Then select the Advanced DNS tab.

Now find the Add New Record button and click it.

We need to add two records. The first is going to be an A record.

And we'll enter this information:

Type: A Record
Host: @
Value: 75.2.60.5
TTL: 5 min

Save that by selecting the checkmark to the right, and then click the Add New Record button again. This time select CNAME record from the drop-down and enter the following:

Type: CNAME record
Host: www
Value: [name-of-your-site].netlify.app
TTL: 5 min

(Value will be the address Netlify has generated for your website.)
And save it by clicking the checkmark.

So... What did we just do?

In simple terms, the A record is the IP address where Netlify can be found online. The CNAME record will point our domain name to that IP address. When users visit your domain name, they'll end up in the correct place because of these records.

Netlify

Now we move to Netlify.

Log in to your account and navigate to the Sites tab, then click the existing site you wish to add a domain name to.

From the Site Overview page, click Domain Settings, then click the Add a domain button.

Enter the domain name you registered on Namecheap and click the Verify button. You should get a prompt of text below the input box letting you know the domain name is already registered, and the verify button will change to read Add domain. Click that Add domain button.

Here's an important step: select the bottom Options drop-down and select Set as primary domain to remove the apex domain as the primary. This sets our primary domain to www.example.com, instead of the bare domain of example.com. Why does that matter? With Netlify, using a subdomain as the primary allows your site to fully utilize their CDN.

Now we can scroll down to the bottom of the page to the HTTPS section where our SSL certificate is being provisioned.

If this does not happen automatically, click the Verify DNS Configuration button, then the Provision certificate button. You may receive a pop-up asking you to confirm by again clicking a Provision certificate button.

After a few minutes, our site has HTTPS enabled! Congrats, you did it!

Let me know if you have any questions :)

Further Reading

Configure external DNS for a custom domain
How to Set Up Netlify DNS - Custom Domains, CNAME, & A Records
[Support Guide] Troubleshooting SSL certificate errors

.answer {
    display: none;
}
.clicked {
    .answer {
        display: block;
  }
}

It's pretty boring, so let's get to work!

SCSS

Inside our body we're going to have our main that will have a class of container. I set the width to 80vw as I like to set an element's size based on the view's screen size versus a hard number in pixels. The margins are set to auto to keep the container centered save for the top, it's 50px, so the container is dropped down from the top of the screen a bit. Here's the code I ended up with:

.container {
    width: 80vw;
    border-radius: 5px;
    padding: 15px;
    margin: 50px auto auto auto;
}

As I mentioned in part 1, the questions themselves are articles, and will be given a class of q, and the articles will contain a div .title, h2 that's the question, our button, a second div with .answer and it will hold a p with the answer to the question.

To keep the code DRY I put some default styles on div like so:

div {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    align-items: center;
}

.q has aborder-radius of 5px to soften the corners, and I added a box-shadow to give it some depth. To keep my code cleaner I used a variable to add shadows (just one of the great things about Sass/SCSS!); in this instance it's $boxshadow: 0 14px 12px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);, so my .q looks like:

.q {
    width: 100%;
    background-color: lavender;
    color: $purple; //variable for #732091
    border-radius: 5px;
    padding-top: 3px;
    margin: 5px 5px 17px 5px; //bottom margin is larger to accomodate the box-shadow
    font-size: 25px;
    font-weight: 600;
    box-shadow: $boxshadow;
}

Inside .q I nested the h2 that will be used to hold the question. Notice the margin set to auto to keep the button to the right.

h2 {
   padding: 7px;
   font-size: 23px;
   margin: auto;
}

The buttons are next, I gave them a margin-right of 10px to nudge them in a little and transition: transform .5s ease-in-out to soften the transitions between movements. Here's the final result:

button {
    cursor: pointer;
    background-color: rgba(255,255,255,0); //removes the background color
    border: 0px;
    padding: 1px 7px;
    color: $purple;
    font-size: 25px;
    font-weight: 600;
    margin-right: 10px;
    text-align: center;
    transition: transform .5s ease-in-out; 
}

I gave my buttons all .qb (for question button) so I could grab them with the JavaScript to add the rotation.

Nested in button I have img, which is what holds the double chevron. The image I used is larger than what I need, so I set the height and let the width figure itself out:

img {
    height: 25px;
    width: auto;
 }

You may not need to do this, it'll depend on the image you select.

Now let's move on to .answer. The most important thing to have is what we set up in part 1: display: none so the answers aren't visible. Everything else is just preferences.

.answer {
    display: none;
    padding: 13px;
    background-color: lavender;
    font-weight: 300;
    font-size: 18px;
    border-radius: 5px;
}

Last is a class that will be added or removed via onClick that will turn the chevron.

.rotate {
    transform: rotate(180deg);
}

Our SCSS is looking pretty good! Now it's time to finish up the JavaScript.

JavsScriptmobile

We need to get access to the chevrons to turn them: we need to add const arrow=quest.querySelector('.qb'); to our JavaScript inside forEach. Next, we'll jump a few lines down into addEventListener where we can toggle the rotate class we just made on arrow like so: arrow.classList.toggle('rotate');. We're using toggle because it's perfect in this situation: if the .rotate isn't present, it's added, otherwise it's removed. Let's take a look at our project:

If you've made it this far, congrats! You made an accessible accordion FAQ using HTML, SCSS and JavaScript!

Here's the complete code used in this three part tutorial:

HTML

<main class="container">
    <h1>Frequently Asked Questions</h1>
    <article class="q" aria-expanded="false">
        <div class="title">
            <h2>What's the difference between a hippo and a zippo?</h2>
            <button class="qb" aria-label="toggle answer">
                <img src="https://i.ibb.co/KKmX2q3/chevron.png" alt="chevron" />
            </button>
        </div>
        <div class="answer">
            <p>One is really heavy, the other is a little lighter.</p>
        </div>
    </article>
</main>

SCSS

$boxshadow: 0 14px 12px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
$purple: #732091;

.container {
    width: 80vw;
    border-radius: 5px;
    padding: 15px;
    margin: 50px auto auto auto;
}
div {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    align-items: center;
}
.answer {
    display: none;
}
.clicked {
    .answer {
        display: block;
    }
}
.q {
    width: 100%;
    background-color: lavender;
    color: $purple;
    border-radius: 5px;
    padding-top: 3px;
    margin: 5px 5px 17px 5px;
    font-size: 25px;
    font-weight: 600;
    box-shadow: $boxshadow;
    .title {
        width: 100%;
    }
    h2 {
        padding: 7px;
        font-size: 23px;
        margin: auto;
    }
}
button {
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0);
    border: 0px;
    padding: 1px 7px;
    color: $purple;
    font-size: 25px;
    font-weight: 600;
    margin-right: 10px;
    text-align: center;
    transition: transform .5s ease-in-out;
    img {
        height: 25px;
        width: auto;
    }
}
.answer {
    display: none;
    padding: 13px;
    background-color: lavender;
    font-weight: 300;
    font-size: 18px;
    border-radius: 5px;
}
.rotate {
    transform: rotate(180deg);
}

JavaScript

const question=document.querySelectorAll('.q');

question.forEach(function (quest) {
  const btn=quest.querySelector('button');
  let arrow=quest.querySelector('.qb');

  btn.addEventListener('click', function() {

    quest.classList.toggle('clicked');
    arrow.classList.toggle('rotate');

    let ariaValue=quest.getAttribute('aria-expanded');
    ariaValue = (ariaValue === 'false' ? quest.setAttribute('aria-expanded', 'true') : quest.setAttribute('aria-expanded', 'false');
  });

});

I added a few more styles to my finished project, feel free to adjust the styles to your taste. If you've made your own accordion FAQ, please leave a link in the comments! Let me know if you have any questions.

And that isn't to say I'm an expert on a11y, I'm not. I am, however, constantly working to improve and continue to make it a priority in my code.

At the end of part one, we had a very bare project:

HTML

<article class="q">
  <div class="title">
    <h2>Question One</h2>
       <button>Clicky</button>
   </div>
   <div class="answer">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</article>

SCSS

.answer {
    display: none;
}
.clicked {
    .answer {
        display: block;
  }
}

JavaScript

const question=document.querySelectorAll('.q');

question.forEach(function (quest) {
  const btn=quest.querySelector('button');
  btn.addEventListener('click', function() {
    quest.classList.toggle('clicked');
  });

});

We won't be adding much code for this step. Why? By using HTML5 elements, we've already achieved greater a11y. We structured our project using elements that are meaningful to assistive technology. Each question is an article, and in my code, (where this is a stand-alone project) the questions are wrapped in <main>. If this is part of a page with more information, wrapping them in <section> nested inside <main> would be best.

These elements are helpful for assistive technology, as opposed to using just <div> elements that don't automatically provide structure.

Adding an ARIA Attribute

We need to add code so that assistive technology can tell the user if an answer is showing or not. We do that by adding the aria-expanded attribute to our <article>, like so:

<article class="q" aria-expanded="false">

This will let users know there's more information that isn't currently visible. Doing this alone is not enough, we have to toggle the attribute to "true" when the answer is showing. To do that, we go back to the JavaScriptmobile!

JavaScriptmobile

Inside our eventListener we need to declare a variable for the aria-expanded attribute of the specific question (quest) that is clicked, and we need to use getAttribute to do so.

let ariaValue=quest.getAttribute("aria-expanded");

If we'd print ariaValue to the console right now, it would display "false", no matter how many times we click the button. To remedy that, we'll use a ternary operator. A ternary operator looks at a condition and executes an expression if it's true, a different expression if it's false. In our case, it will look to see if the value of the aria-expanded attribute is true or false, and then set it to the opposite. Keep this in mind as this next part may be confusing at first.

ariaValue = (ariaValue === 'false') 
     ? quest.setAttribute('aria-expanded', 'true') 
     : quest.setAttribute('aria-expanded', 'false');

Now let's break this down a little: ariaValue = is just us wanting to store something in that variable. ariaValue === "false" ? is the condition that's being evaluated, if it evaluates true (meaning the current value is "false"), then aria-expanded is set as true.

If the condition evaluates false (meaning the current value is "true"), then our attribute is set to false. If you're thinking I'm trying to tell you that if something is false, and it should be true it gets set to true, and if something is supposed to be false, and it is false that it's false, it gets set to false anyway... You're correct!

Here's a less maddening example:

var skyColor = 'blue';
var timeOfDay = (skyColor === 'blue') ?  'day' : 'night';
console.log(timeofDay);  //'day'

Currently, skyColor is blue, because that's what the variable is initialized as. The second variable, timeOfDay is going to evaluate the condition (skyColor === 'blue'), and if that expression is found to be true, timeOfDay stores day.

var skyColor = 'black';
var timeOfDay = (skyColor === 'blue') ?  'day' : 'night';
console.log(timeofDay);  //'night'

In this example, the expression is false, so timeOfDay stores 'night'.

If your brain isn't a tangled mess after all that, congratulations! You're done! If it is a tangled mess, congratulations! You're still done! And here's a bandage for your brain.

Visual Effects

Here's a gif of a button being clicked and the aria-expanded value changing (our project doesn't look like this yet):

I really hope you enjoyed this article and found it helpful. Leave a comment below if you have any questions. Tune in next week for when we style this project!

Finished project code

HTML

First, we need our HTML. Each question is going to be an article, and in it will be a question and its answer like so:

<article>
    <div>
         <h2>Question One</h2>
     </div>
     <div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
     </div>
</article>

For styling purposes, article will have a class of q, the div wrapping the h2 will have a class of title, and the div wrapping the p containing the answer will have a class of answer.

The answers won't automatically be visible, this is a fancy-pants FAQ after all! So we'll need a button to expand and collapse the answers:

<button></button>

and we'll tuck that in to our title div. Feel free to add some text in the button or an image that users can click.

SCSS

Now, the way we're going to make the answers visible is by adding a class to the answer div when a user clicks the button. Initially our SCSS for answer needs to ensure the answer is not visible:

.answer {
    display: none;
}

and we'll be adding a class called clicked to make it visible:

.clicked {
    .answer {
        display: block;
  }
}

But how do we add the clicked class to the div? I'm so glad you asked! That takes us right to our next section.

JavaScript

We're going to start out with const question=document.querySelectorAll('.q');, this will get all of our articles, our individual questions.

I had never used forEach, so this was a good excuse to learn about it, and it's perfect for what we're doing. forEach performs an action once on each item in an array. Where's our array? Weeell, we don't have one. Ope.

Luckily querySelectorAll returns a NodeList that forEach treats like an array. So, the tl;dr is querySelectorAll compiles a list of the elements with class q, and forEach performs an action on each item in the list one time.

Still with me? I hope so! Now let's add the forEach we just learned about to our code:

question.forEach(function (quest) { })

Before we fill in the action to be performed on each question, we need to make it so our buttons can be put to work. Inside the curly braces we'll create a variable for them:

const btn=quest.querySelector('button');

This will give us access to the button elements. Each question has a button, and now that we have access to the latter, we can add an eventListener so we can reveal the answer:

btn.addEventListener('click', function() { })

Now, when a user clicks a button, a function is executed. How does this happen? That line of code is 'listening' for the user to click on something (in our case a button) so it can perform its task (show the answer).

So for a quick recap: so far with our JavaScript we have gathered all of the questions, we have gained access to the buttons in each of those questions, and we told the buttons to pay attention as they may get clicked.

Speaking of clicked, I mean, .clicked, here's where that class comes in to play. We'll use classList to make the changes we want. classList returns a live list of the classes an element has. There are different ways to use classList on elements: add() a class, remove() a class, toggle() a class or replace() a class. I want my answers to stay visible until the user decides to close them, so I'm going to use toggle(). And that looks like this:

quest.classList.toggle('clicked');

So what's happening now? When a user clicks on a button, the eventListener knows the click means to toggle .clicked on quest, which is the question. For a refresher, here's .clicked:

.clicked {
    .answer {
        display: block;
  }
}

Or if you're using CSS:

.clicked .answer {
    display: block;
}

It's important to note the presence of .answer; if we just added .clicked { display: block } to the article, it wouldn't show the answer. By having .answer in there, it will match an element that has a class of answer only if that element has a parent element with .clicked. Which is now what we have: our eventListener adds .clicked to the article, which contains <div class="answer"> and boom! Our answer appears!

Please note the space between .clicked and .answer in the CSS version, if that space is removed it will be looking for something different and the answer won't appear.

Here's a visual of what classList.toggle does to the HTML when a button is clicked:

And here's what's happening on the styles before and after the click:

That's all there is to it! Pretty simple, yeah?

Now your project should look something like this:

Let me know if you have any questions or comments, and drop a link if you try this out for yourself! Check out part 2 where we improve accessibility and part 3 where we add styling and rotate that arrow when the user clicks the button.

Having your website be responsive is so important and necessary these days, but that doesn't mean you have to sacrifice aesthetics and fun features! Follow along to learn how to make a simple navigation menu that slides in and out at the click of a button, perfect for small viewports. Full code can be found here.

Let's dive right in!

HTML

<nav id="sidenav" class="sidenavbar">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">FAQ</a>
            <a href="#">Blog</a>
            <a href="#">Contact</a>
</nav>
<button aria-expanded="false" class="openbtn" id="openBtn" aria-label="mobile navigation" onclick="toggleNav()">
    <span id="chevron">&raquo;</span>
</button>

Using <nav> we add our links. Focusing on UX we have aria-expanded="false" that changes to true when the menu is opened, which indicates to screen reader users the visibility of the menu. I opted to make my menu a bit fancy using a chevron that rotates to indicate which direction the slider will go onclick, feel free to use what you'd like.

CSS

On to the styles for the menu itself:

.sidenavbar {
    height: 100%;
    width: 0;  /* initial width is set to 0, slide happens with JS */
    position: fixed;  /* keeps sidenavbar in place */
    z-index: 1000;  /* makes sidenavbar stay on top */
    overflow-x: hidden;  /* prevents unwanted scrollbar */
    top: 0;
    left: 0;
    background-color: darkBlue;
    transition: all ease-in 0.5s;
}

Link styles

a {
        padding: 7px 14px 3px 14px;
        text-decoration: none;
        font-size: 20px;
        color: lightGreen;
        display: block;
        transition: all ease 0.3s;
        text-align: center;
}

Styling note: on my personal website I have the height attribute set to auto, and a class with styling margin-top: 35px added to the first link to create a more balanced look, like so:

Play around and see what you like!

Now let's style the button used to open and close the menu:

.openbtn {
    cursor: pointer;
    color: white;
    background-color: darkBlue;
    border: none;
    height: 40px;
    width: 40px;
    position: fixed;
    top: 75px;
    transition: all ease-in .5s;
/* rounds the upper right and lower right corners */
    border-radius:  0 5px 5px 0;  
    z-index: 999;
}
.openbtn:hover {
    background-color: lightGreen;
}

Pretty straight forward; the most essential part of the openbtn class is the width of the button, which I'll explain shortly.

Styles for the chevron:

#chevron {
    transition: all ease-in .5s;
    float: right;
    font-size: 20px;
    margin-right: 5px;
    color: #FFF;  
}

Observant readers may have noticed the transition attribute of the sidebarnav and openbtn classes and chevron IDs are all the same. This is critical to ensure a seamless transition. If you change the values, just make sure to change it on all three or things may look wonky.

The float position of the chevron is significant. When the button is clicked to open the menu, the button's width actually expands, which makes the button appear to slide. Here's a visual with the opacity of the menu bar set to 0.5 to show what's happening behind the scenes:

If the chevron floated left, it wouldn't be visible when the menu is open.

Now let's get to making this menu slide!

JavaScript

In the HTML we specify the function of toggleNav to run onclick, so that's where we'll begin:

function toggleNav() {

}

We'll need some variables: one for the menu itself, one to rotate the chevron, one to move the button, and one for the aria value.

var sidenav = document.getElementById("sidenav"),
    chevron = document.getElementById("chevron"),
    btn = document.getElementById("openBtn"),
    ariaValue = btn.getAttribute("aria-expanded");

You can opt to select the elements by class or opt for querySelector, it's up to you. The ariaValue needs to remain a .getAttribute because we'll be setting it attribute for accessibility.

Now, in the CSS the menu's width is set to 0. So, until the button is clicked we can't see the menu. JavaScript will make that magic happen in the first line:

sidenav.style.width = sidenav.style.width === "175px" ? "0" : "175px"; 
chevron.style.transform = chevron.style.transform === "rotate(-180deg)" ? "rotate(0deg)" : "rotate(-180deg)"; 
btn.style.width = btn.style.width === "215px" ? "40px" : "215px";

Using a ternary operator, we're checking the value of width for the menu. If it's 0, the value is changed to 175px, which opens the menu. If width has a value of 175px, the value is then changed to 0, closing the menu.

The chevron also has a ternary operator, too, which causes it to rotate 180 degrees.

The button's width was mentioned earlier to be significant, and here's why: to properly have the button move out as if attached to the menu, the ternary needs to compare the widths of just the button, to the button plus the width of the menu. So, if you change the menu or button width in the future, these values will also need to be updated.

Now let's finish up our function by addressing aria-expanded, so screen readers will know if the menu is open or closed.

ariaValue = ariaValue === "true" ? btn.setAttribute("aria-expanded", "false") : btn.setAttribute("aria-expanded", "true");

Remember when we defined our variables, we used getAttribute to find out the value of aria-expanded. Now we'll set the attribute accordingly. It's not difficult or fancy but incredibly important for accessibility.

And that's it!

Pretty simple, yeah? I had a lot of fun making this collapsible menu and hope you've enjoyed following along!