The following KB articles relate to this topic:

Best Practices for Accordions and Tabs

Accordions and Tabs can be useful tools for organizing content on desktop web browsers, but they can cause issues on mobile browsers. We have a few recommendations for using them.

  • Don't put Accordions in Tabs or Tabs in Accordions. While we allow you to do this, there are a variety of reasons, responsive and more, why this is a bad idea. Pages with Accordions and Tabs embedded within each other are very difficult to use on mobile browsers.
  • Use Accordions over Tabs. Accordions display much better on mobile browsers and should be used over tabs except in very specific circumstances.

If you really want to use accordions, a great option is to have them turned on in large screen view and turn them off for smaller screen views. Instead of using tabs in smaller screens, you could switch to just text areas. Here's an example. Narrow your browser screen by pulling in the width and watch what happens to the tabs below when you reach a smaller screen width: