How to change Tabbed Content to Accordion in XS

I Need Help
1

Getting tabs to look right in the XS breakpoint is a pain in the booty. Right now, the tabs get stacked atop each other, yet the content sits below the lowest tab, which looks stupid. In other words, the topmost tab is detached from its content, which just doesn’t look right.

The example website below is a great solution. Open it in your browser, then reduce the browser window width to simulate the XS breakpoint. Note how the content ALWAYS sits directly below its associated tab, which is the right way to do tabs in XS.

https://www.cssscript.com/demo/responsive-css-accordion-tabs-component/

How do I accomplish this with Blocs’ Tabbed Content? Surely there must be a way. If impossible, then how are the rest of you dealing with those stacked tabs in XS?

1 Like
2

Hello @JDW, you can add this in two options:

First option, if you just want make the nav-items full width when you change viewport, add this code to page settings -> Add Code:

<style>
@media (max-width: 45em) {

.nav-item {
  width: 100%;
  margin-right: 0;
  margin-top: 0.2rem;
}
}
</style>

The issue is that the nav-items are in the top of each other. So for have that sorted, there is a 2nd Option:

Option 2:

  1. Dont change nothing in your tabbed content (or create a new one)

  2. Add a html code bric after your tab and add this code inside:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"></div>

  1. Add this file to your Page Settings: accordion.js.zip

  2. Add this code to your Page Settings -> Add Code:

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
	getAccordion("#nav-17195-tab",768);
});
</script>

(change #nav-17195-tab to the ID of your tab)

  1. And voila you change from tab to accordion when you change your viewport.

Try it…

4

Thank you @JDW,

Regarding your first question, go to this code you inserted in page settings -> Add code:

getAccordion("#nav-17195-tab",768);

And change the 768 to the viewport you need, the bootstrap viewports are:

  • Extra small: < 576px
  • Small: ≥ 576px
  • Medium: ≥768px (ACTUAL)
  • Large: ≥992px
  • Extra large: ≥1200px

Regarding your second question, go to page settings -> Add Code and add the following styling:

To style the text of the tab:

.panel-title a {
    background:#ccc;
}

To style the Frame of text:

.panel-title {
    background:#ccc;
}
5

I should put your JS code in the FOOTER, right?

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
	getAccordion("#nav-17195-tab",768);
});
</script>
6

Normally I put it in header… to load immediately when it loads the page…

7

I understand how styling works now, thank you. I will work on that.

Please forgive me but I have 2 final questions to make this discussion complete:

  1. How do I get the topmost Tab’s content to be displayed by default? (Right now, the buttons display, but all content is hidden.)
  2. How can I make all content become hidden except for the currently selected Tab? (For example, if I click the top Tab now, it’s content displays, but if I then click the second Tab, it’s content displays and the first Tab’s content continues to display. I want to auto-hide that first Tab’s content when another tab is clicked.)
8

Ok, let me try to fix that…

1 Like