swap tabs fro accordian mobile - Support | Kriesi.at

Tagged: accordian, mobile, tabs

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
April 25, 2015 at 1:39 pm #434687

Munford
Participant

HI
I am looking at ways to improve my site on the mobile, and would like to be able to swap a tabbed section with an accordian section, like I have on the page below, but also on all the portfolio pages on the site. I know I can do this by using the individual page IDs and show/hide the sections via css, but I would like to be able to do it globally across the site. Is that possible?
Thanks
Nancy

April 27, 2015 at 7:25 am #435054

Ismael
Moderator

Hey Munford!

Thank you for using Enfold.

Unfortunately, it’s not possible to do it globally. You need to manually add the section id if the element is inside a color section or the custom css class attribute to each tab and accordion element then toggle the display property using css media queries. Refer to these links for more info:

http://stackoverflow.com/questions/11796297/div-show-hide-media-query
https://kriesi.at/support/topic/how-to-hide-some-elements-in-mobile-version/#post-362263
https://kriesi.at/support/topic/is-there-an-option-to-create-a-separate-page-design-specific-to-mobile-devices/
https://kriesi.at/support/topic/displaying-another-slider-on-mobile-devices/
https://kriesi.at/support/topic/replace-slider-on-mobile/

Cheers!
Ismael

April 27, 2015 at 9:31 am #435107

Munford
Participant

HI Ismael
Thanks for the links – I have worked a bit with toggling pc/mobile content.
I guess my question is: if I use the same css attribute on every tab section, and the
same on every accordian, can I use that to toggle every page that has those, or do I need
to use each page ID in a separate query. It’s like 50 pages…
thanks
Nancy

April 28, 2015 at 1:02 pm #435981

Ismael
Moderator

Hi!

Yes, you can use the class attribute to toggle the display of the elements. You don’t need to add the custom page id.

Cheers!
Ismael

April 28, 2015 at 1:12 pm #435991

Munford
Participant

That’s great news!
what would the css look like for that – just leave off the page-ID?

April 29, 2015 at 11:19 am #436584
Ismael
Moderator
Hey!

For example, if you use the “custom-tabs” css class attribute for the tab elements and the “custom-toggles” for the toggle elements, the css code will look like this:
```
@media only screen and (min-width: 768px) {
.custom-toggles { display: none; }
}

@media only screen and (max-width: 767px) {
.custom-tabs { display: none; }
.custom-toggles { display: block; }
}
```
Regards,
Ismael
April 30, 2015 at 12:31 pm #437368

Munford
Participant

excellent that is working great. thanks!
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘swap tabs fro accordian mobile’ is closed to new replies.