Expandable text

  • Resolved Anonymous User

    (@anonymized-20586949)


    3 years, 6 months ago

    Hi, I used Gutenberg to design my website.

    My work pages have an expandable text (if you click ‘>’ on the bottom of the page, you can see the work description). I have executed this with plug in Ultimate Block, because I could not find a way to do it inside Gutenberg. Is there a way I can achieve this without a plugin?

    • This topic was modified 3 years, 6 months ago by Anonymous User.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Alvaro Gómez

    (@mrfoxtalbot)

    3 years, 6 months ago

    Hi @ferhyunt! You can accomplish this hide/show effect without plugins by using basic native HTML. You will want to use aCustom HTML block to add the code below:

    Screen Shot on 2022 09 12 at 14 56 03

    
<details>
     <summary>click to open</summary>
The longer text that is hidden by default goes here.
</details>

    That part inside the <summary> tag is what your visitors will see and the part below what will be shown after they click on the summary. It should look like this:

    The details tag includes an arrow to indicate its state (open/close). You can remove this arrow and make the pointer behave like a link using the following CSS code:

    
/* Hide the default arrow */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
/* Make the cursor act like a link */
details > summary:hover {
cursor:pointer;
}

    You can add this code in your “Additional CSS” tab (at My Site > Appearance > Customize), in a new line, under any existing code, and make sure you click on “Save Changes” to save it:

    (To access the CSS editor in the Customizer when using FSE you’d need to add this after your URL: /wp-admin/customize.php )

    One more thing, if you want to use a custom character such as an arrow >, you can use this chart to locate the different “HTML” code for that character:
    https://unicode-table.com/en/#003E

    There are other more elaborate ways to achieve this effect but I feel that using the details HTML tag is the easiest one by far.

    I hope that helps!

    Thread Starter Anonymous User

    (@anonymized-20586949)

    3 years, 6 months ago

    Thanks for your kind explanation! I really appreciate it. One more question, is there a way that the default styling of <details> from ‘▶’ and ‘▼’ to ‘>’and'<‘ ? with CSS code?

    Thread Starter Anonymous User

    (@anonymized-20586949)

    3 years, 6 months ago

    Nevermind! I got it work with this code

    details > summary {list-style: none;}

    summary::-webkit-details-marker {display: none}

    summary:before {content: ‘\003E’}
    details[open] summary:before {content: ‘\003C’;}`

    • This reply was modified 3 years, 6 months ago by Anonymous User.
    Thread Starter Anonymous User

    (@anonymized-20586949)

    3 years, 6 months ago

    I figured that this way, formatting gets more complicated.. So I guess I just wait until Gutenberg officially support hide/show effect 😅

    Alvaro Gómez

    (@mrfoxtalbot)

    3 years, 6 months ago

    I am happy to hear that helped @ferhyunt!

    There is an ongoing conversation about including this type of block here, if you want to chip in: https://github.com/WordPress/gutenberg/issues/21584

    Take care!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Expandable text’ is closed to new replies.

Tags