How do I create an accordion box that only works if the site is being viewed from mobile?

Question

I am developing a site in which the footer has four columns of links categorized into 'About', 'Help', 'My Account' and 'Legal'.

For instance, the Legal would look like this on the desktop version:

---

LEGAL

• FAQs
• Privacy Policy
• Terms of Use

---

However, I want the categories to be accordions only on mobile version . I managed to make an accordion but I don't know how to make it work only when it is on mobile version, like the footer on the lululemon website.

The HTML for the accordion so far is:

<button class="collapse-header">Leal</button>
  <div class="footer-menu-collapse">
    <a href="#">FAQs</a>
    <a href="#">Terms of Use</a>
    <a href="#">Privacy Policy</a>
  </div>

The CSS for the accordion so far is:

button.collapse-header {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 16px;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.2em;

  width: 100%;
  background-color: $white;
  border: none;
  outline: none;
  cursor: pointer;
}


.footer-menu-collapse {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

The JavaScript I coded so far is:

var acc = document.getElementsByClassName("collapse-header");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

Answer 1

You can put both codes for mobile and desktop version, and use CSS media queries ( @media only screen and (max-width: 600px) ) to show only mobile code on small screens and show desktop code on big screens. For example:

<!-- mobile code --> 
<button class="collapse-header">Leal</button>
<div class="footer-menu-collapse">
    <a href="#">FAQs</a>
    <a href="#">Terms of Use</a>
    <a href="#">Privacy Policy</a>
</div>

<!-- desktop code --> 
<ul class='bigScreen'>
   <dl><a href="#">FAQs</a></dl>
   <dl><a href="#">Terms of Use</a></dl>
   <dl><a href="#">Privacy Policy</a></dl>
</ul>

And CSS:

/* don't show mobile code on big screens */
.collapse-header, .footer-menu-collapse{
     display: none;
}

/* only apply css for smaller than 600px screens */
@media only screen and (max-width: 600px){
    .bigScreen{
         display: none;
     }
     .collapse-header, .footer-menu-collapse{
         display: block;
     }
}

Second method:

You can handle the issue with JS. For example the lululemon site, is programmed with the React library and used the react-collapse to handle collapsing.

JSX:

<div class="footer-menu__collapse col-xs-12 col-md-3">
  <ul class="footer-menu__list collapse-wrapper">
    <li class="footer-menu__item">
      <h4 class="collapse-header">
        <a class="footer-menu__link" href="#">My Account</a>
        {/* 
           This is the arrow down icon that handles collapsing
           and only will be shown under 992px,
           By clicking it, isOpened state will be updated to opposite state.
        */}
        <span
          onClick={() => this.setState({ isOpened: !this.state.isOpened })}
          class="collapse-toggle"
        >
          <svg>...</svg>
        </span>
      </h4>
      {/*
         Collapse is open always when width > 992px,
         otherwise is depend on isOpened state
      */}
      <Collapse isOpened={window.innerWidth < 992 ? this.state.isOpened : true}>
        <ul class="footer-menu__list collapse-detail">
          <li>Sign In</li>
          <li>Register</li>
          <li>Order Status</li>
          <li>Returns</li>
        </ul>
      </Collapse>
    </li>
  </ul>
</div>