Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 30, 2018 at 2:49 pm #904920
    johan5stars

    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

    January 31, 2018 at 7:30 am #905406
    Ismael

    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

    January 31, 2018 at 11:23 am #905513
    johan5stars

    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

    February 1, 2018 at 11:07 am #906186
    Ismael

    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

    February 1, 2018 at 11:51 am #906237
    johan5stars

    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

    February 2, 2018 at 6:22 am #906638
    Ismael

    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

    February 2, 2018 at 1:25 pm #906839
    johan5stars

    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, 10 months ago by johan5stars.
    February 5, 2018 at 3:59 am #907652
    Ismael

    Hi,

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

    Best regards,
    Ismael

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