Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 10, 2024 at 8:40 pm #1433945
    WorldinColor

    I have a page with content that I want to split into 2 collapsible sections (heading then content below) in a style similar to how I’ve used an accordion elsewhere on my website (see private content) below. Content inside the accordion seems limited to paragraph text or an image. I want content within my 2 collapsed sections to have a grid row and icon list, respectively.

    I’d appreciate any suggestions for how to create 2 collapsible sections that work as I need or any other suggestions to display my content {[Heading 1 + body text + icon grid row] + [Heading 2 + body text 2 + icon list]} on one page without clutter. I initially tried the accordion style – but can’t use it as I couldn;t show all the content I need. To reduce clutter I want to show only one of these sections at a time. Thanks!

    February 11, 2024 at 11:20 am #1433974
    Rikard

    Hey WorldinColor,

    Did you try out the Fold/Unfold feature which is available in elements like Color Section and Grid Row for example?

    Best regards,
    Rikard

    February 13, 2024 at 7:16 pm #1434199
    WorldinColor

    Hi Rikard,

    Thanks for the suggestion! I set 2 color sections to fold/unfold (see link below) but it’s not looking very clean or professional. A couple of follow up questions:

    1) The 2 color sections need to behave like accordion elements – the content in the color section should only show when the content is unfolded. How can I hide all color section content below the fold?
    2)Is there CSS code to make the Read More text – heading text instead of body text as ? That is, H3, H4….etc – so heading font/color/weight consistent with the headings settings in my child theme settings?

    Thank you!

    February 13, 2024 at 9:30 pm #1434219
    Rikard

    Hi,

    1. That is what the theme has to offer unfortunately, we can’t provide custom elements or solutions as that would be out of scope of theme support.

    2. I’m not sure I understand your question, how exactly do you want to alter the read more text?

    Best regards,
    Rikard

    February 13, 2024 at 10:49 pm #1434225
    WorldinColor

    Hi,

    RE: #2 – I want the “Read More” text for the folded sections to be formatted as a heading -for example the equivalent of the HTML below. In my CSS I already have a custom class to override default padding/borders (see private content). I’d like to add CSS code to set the “Learn More About….” to be formatted as a Heading2 (for example) but I’m unsure what whether this would also be a class override and if so what class/attribute. How can I do it?

    HTML – “<h2>Learn More About ACME</h2>”

    RE: #1 – Solved. FYI – I’m documenting my solution for #1 in case someone else encounters this issue in the future. I was able to get all the color section content under the fold (including the problem heading which previously had been above the fold) by putting the heading and text block underneath the heading into a 1/1 column. All the content is folding/unfolding as I’d wanted.

    Thanks!

    February 14, 2024 at 10:13 am #1434263
    Rikard

    Hi,

    Thanks for the update. Please try this in Quick CSS in order to style the read more text:

    .av-fold-button-container {
  font-family: 'roboto', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 24px !important;
}

    Best regards,
    Rikard

    February 23, 2024 at 11:45 pm #1435258
    WorldinColor

    Hi, this is resolved, thank you.

    February 25, 2024 at 9:55 am #1435350
    Rikard

    Hi,

    Thanks for the update, we’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Collapsible Content with Enfold theme’ is closed to new replies.