-
AuthorPosts
-
January 30, 2018 at 2:49 pm #904920
Hello,
I would like to use something similar to the Accordion module but only on mobile phones. The idea is to toggle all the content under H2 headings.
On mobile, it would be nice if the users could see only part of the content for very long posts. This way it won’t be necessary to scroll down for a long time. The idea would be to collapse the text under the <h2> titles. By touching the title, the user would be able to show/hide the text under it.
Is it possible to do with the Accordion module or is it better to do it with custom CSS code?
Thank you,
JohanJanuary 31, 2018 at 7:30 am #905406Hey johan5stars,
Thank you for using Enfold.
That will probably require some custom script. Please provide a link to a site with the same feature or element. Or provide a screenshot from imgur or dropbox.
Best regards,
IsmaelJanuary 31, 2018 at 11:23 am #905513Hey Ismael,
Thank you for your reply. Here is a link to a site with the same feature. If you display it on a mobile phone on scroll down to the table of content (The Research), the content is not displayed. You will need to expand each chapter to reveal the text.
If it requires custom script, do you provide this service or could you recommend a developper?
Best regards,
JohanFebruary 1, 2018 at 11:07 am #906186Hi,
Thank you for the update. Are you referring to the “The Research” section? You can do that with the Tabs or the Accordion element.
Best regards,
IsmaelFebruary 1, 2018 at 11:51 am #906237Hi Ismael,
Yes I’m referring to “The Research” section. I’ve tried the Accordion element but it’s not giving exactly the same results.
If I had the following shortcode, the Accordion and the content below will not be displayed on desktop. It will appear only on smartphone.
[av_toggle_container initial='0' mode='accordion' sort='' styling='' colors='' font_color='' background_color='' border_color='' av-desktop-hide='aviaTBav-desktop-hide' av-medium-hide='aviaTBav-medium-hide' av-small-hide='aviaTBav-small-hide']
[av_toggle title='Title 1' tags='']
CONTENT 1
[/av_toggle]
[av_toggle title='Title 2' tags='']
CONTENT 2
[/av_toggle]
[/av_toggle_container]On desktop, the content should be displayed as usual:
<h2>Title 1</h2>
CONTENT 1…
<h2>Title 2</h2>
CONTENT 2…On smartphone, the content should be hidden:
[av_toggle title='<h2>Title 1</h2>' tags='']
HIDDEN CONTENT 1…
[/av_toggle]
[av_toggle title='<h2>Title 2</h2>' tags='']
HIDDEN CONTENT 2…
[/av_toggle]Thank you,
JohanFebruary 2, 2018 at 6:22 am #906638Hi,
Thank you for the update.
You can use the elements’ Screen Options in order to toggle their visibility on different screen sizes or devices. Adjust the options of the accordion element so that it’s only visible on mobile view. Use another set of elements for desktop.
Best regards,
IsmaelFebruary 2, 2018 at 1:25 pm #906839Hi,
Thank you for the answer. But it’s not the solution I am looking for. The content should be visible on desktop and not on mobile. It’s the same element that should be hidden on mobile and not on desktop. It’s not a different element for each type of device. I will ask a developer.
Best regards,
Johan- This reply was modified 6 years, 9 months ago by johan5stars.
February 5, 2018 at 3:59 am #907652 -
AuthorPosts
- You must be logged in to reply to this topic.