Menu icon Foundation
Accordions - hide "active" for small?

I tried putting the "active" class in it's own nested div and that didn't work, and then in separate divs with "show-for" and "hide-for" variables, and it just hid it for all. Any suggestions on how to hide the active accordion state for small only?

<div id="panel3" class="content active hide-for-small-only">
^ this hides the active div on small, but doesn't let it show on click - I need it to still show on click

accordionhide-for-small

I tried putting the "active" class in it's own nested div and that didn't work, and then in separate divs with "show-for" and "hide-for" variables, and it just hid it for all. Any suggestions on how to hide the active accordion state for small only?

<div id="panel3" class="content active hide-for-small-only">
^ this hides the active div on small, but doesn't let it show on click - I need it to still show on click
Jonathan Smiley over 5 years ago

Sorry Eric, can you elaborate a little? Do you mean you want the active accordion to always be hidden on small, so there is no active accordion element on small at all?

Karl Ward over 5 years ago

You want to hide the element, or the state/effect? If you only want the .active class to apply for medium-up screens, you should define the .active class within a media query:

// The .active class only applies styles for medium-up screens
@media #{$medium-up} {
  .active {
    // some styles here
  }
}

Monk over 5 years ago

I'm picturing something like this - for columns, you can put in a "show-for-small-only" or "hide-for-small-only" class in the div. I'm trying to create a condition that would be like "active-for-medium-up", if there were such a thing.

I'll also try explaining it this way: For medium and large sizes, on page load, I'd like for the accordion I've built to show a defined content block, which you get by adding "active" to the class, like so:

[ div id="panel2" class="content active" ]

But on small, I'd like the exact behavior you get when you don't have "active" in the class, like so:

[ div id="panel2" class="content" ] <-- with this the 3 collapsed tabs are shown, and toggling each one open by clicking it still works.

*using ['s instead of <'s to show the code

Karl Ward over 5 years ago

Well, my previous example would handle that also ... Basically you can define a class .active to apply for ONLY medium-up screens, so technically it will have no effect on small screens.