Blowing up articles

  • Unknown's avatar
    lkraak · Member ·

    I would like to show a portion of my article, the top quarter all the way across, as a picture/button that when you click the rest of the article is revealed pushing the rest of the website down.

  • staff-ozmodiar · Staff ·

    That’s not functionality that WordPress.com currently offers on its own. the closest I can think of would be the “more” feature:

    https://wordpress.com/support/wordpress-editor/blocks/more-block/

    …but that’s not quite what you are looking for.

    There may very well be a WordPress plugin out there that does exactly what you are looking for. However, you’d need to track it down and then switch to the WordPress.com Business or eCommerce plan to use it on your site.

    https://wordpress.com/pricing/

    Let us know if anything is unclear or you have any further questions.

  • Unknown's avatar
    musicdoc1 · Member ·

    @lkraak, staff-ozmodiar,

    Hi guys. I loved @lkraak’s idea and, hoping that someone would provide a procedure, subscribed to the topic last night. Today, I remembered that I’d recently discovered some previously unknown (to me) capabilities of the collapsible content code, described and illustrated in the Collapsible Content (accordion effect) section of the Advanced HTML support page. So I decided to run some trials.

    Immediately I found that you can substitute the HTML code of an image in your media library for the text between the summary tags in the code. This produces an “accordion” effect that is opened by clicking on an image instead of on some text. Even though the caret remains, you can click on the image to open the accordion, displaying the hidden content. I also found that after tinkering with the code a bit I could get the caret to appear at the bottom of the image instead of a the top.

    Example 4a (from my test page) – content hidden behind an image; hidden are a block of text, an image, and a text list 

    
<details><summary><img src="image URL #1 (displayed)" /></summary>text block
<ul>
 	<li><img src="image URL #2" /></li>
 	<li>butter pecan</li>
 	<li>pistachio</li>
 	<li>chocolate chip</li>
</ul>
</details>
  • Unknown's avatar
    musicdoc1 · Member ·

    I’d inadvertently included the hidden image in the list. To display a images outside a list or a text block, the code could be something like this: 

    <details><summary><img src="image URL #1 (displayed)" /></summary>text block
<img src="image URL #2" />
<ul>
 	<li>list item 1</li>
 	<li>list item 2</li>
 	<li>list item 3</li>
</ul>
more random text
<img src="image URL #3" />
</details>
  • The topic ‘Blowing up articles’ is closed to new replies.