Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #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,
    Johan

    #905406

    Hey 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,
    Ismael

    #905513

    Hey 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,
    Johan

    #906186

    Hi,

    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,
    Ismael

    #906237

    Hi 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,
    Johan

    #906638

    Hi,

    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,
    Ismael

    #906839

    Hi,

    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.
    #907652

    Hi,

    Alright. I’m pretty sure the developer will recommend the same thing. Let us know if you need anything else.

    Best regards,
    Ismael

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.