How to apply style to collapsible content (accordian effect)
-
I’m creating a static page to hold a FAQ-style list and I’m having trouble styling the text. I’m also a bit confused about how the wordpress.com block editor manages html tags versus “preformatted text”.
If I create a code block and insert html tags, the editor doesn’t parse the tags and instead displays them as text.
Then, if I convert the block to preformatted, the editor parses the tags, but displays the text with an ugly monospaced font and grey background.
Then, if I edit the preformatted block as html and remove the pre tags which the editor inserted at the top and bottom, the formatting reverts to the default for my theme. Then, and only then, do I appear to actually be in the html editor where I see the tabs to toggle between HTML and Preview at the top of the block.
<pre class="wp-block-preformatted"><details open=""> ... </pre>I would like to have more control over the styling of the text in each section, but I’m finding the behavior of the block editor so confusing that I’m not sure where to try to insert html or css.
NOTE: I’m using the free wordpress.com product with no upgrades.
I’d appreciate any clarification.
The blog I need help with is: (visible only to logged in users)
-
Hi there, here’s the guide for creating an accordion effect using HTML tags https://en.support.wordpress.com/advanced-html/#collapsible-content-accordion-effect
I believe this was written prior to the Block Editor being enabled, but it should still work. I’ve also tagged this thread for Staff input on that point.
As far as styling, any CSS changes would require having either the Premium, Business or eCommerce plan on your site. https://en.support.wordpress.com/custom-design/custom-css/
-
Yep, you can still do that with a Custom HTML Block: https://en.support.wordpress.com/wordpress-editor/blocks/custom-html-block/
- The topic ‘How to apply style to collapsible content (accordian effect)’ is closed to new replies.
WordPress.com Forums 