--- title: "Read More Component" description: "The Read More Component can be used to hide Parts of Content in Beginning and let the User decide to open it. It also works the other Way round, providing an Option to the User to show less Content." path: https://www.eonshowroom.eon.com/en/specials/read-more-component.html lastModified: 2025-04-09T12:33:16.457Z --- # Read More Component # Read More ##### Text in Read More component ## Examples can be seen below ###### Subheadline can be used in RTE itself. Abstract is also possible - The European languages are members of the same family. Their separate existence is a myth science, music, sport, etc, Europe uses the same vocabulary. Copy Text is the default - the languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words. If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages. ###### Subheadline for some List elements - Copy text is the default - the languages only differ in their grammar, their pronunciation and their most common words. - To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words. - If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages. Then there is copy small text - To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is.The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. > Last but not least there can be a Quote in Copy Text which can be used for statements. The author of the Quote can be added by using Copy Small. > Jone Doe, 2021 [How to Configure](#how-to) ### Description The Read More Component can be used to not show full Content in Beginning and let the User decide to open it. It also works the other Way round, providing an Option to the User to show less Content. - Show / Hide Parts of Content on a Page - Only works together with Read More Divider Component [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/page-structure-read-more--interactive) ### Inspirations ##### Table in Read More Component with Fade Effect ## Show / Hide only a certain Amound of Rows. | **EUR in millions** | **Dec 31, 2019** | **Dec 31, 2018** | | --- | --- | --- | | Liquid funds | 3,602 | 5,423 | | Non-current securities | 2,353 | 2,295 | | Financial liabilities | -29,482 | -10,721 | | FX hedging adjustment | 167 | -28 | | **Net financial position** | 23,360 | -3,031 | | Provisions for pensions | 7,201 | -3,261 | | Asset-retirement obligations¹ | 8,869 | -10,288 | | **Economic net debt** | 39,430 | -16,580 | | Adjusted EBITDA² | 6,897 | 4,840 | | **Debt Factors** | **5.7** | **3.4** | ### Usage Rules & Features ##### Features - Show / Hide Parts of any Content ##### Properties - Configure Text of Read More and Read Less Buttons - Choose what should always be visible by positioning the Read More Devider Component ##### Design - Hard Break or Fade Effect is possible - For Tables configure which Amount of Row should be always visible ##### In which Grid Columns does it fit? | Grid Columns | Does it fit? | | --- | --- | | 2 | no | | 3 | yes | | 4 | yes | | 5 | yes | | 6 | yes | | 8 | yes | | 9 | yes | | 10 | yes | | 12 | yes | ##### DO's - Use this Component to shorten long Pages in Beginning ##### DONT's - Don't use it in 2 Column Grid - Do not add more than one Element after the Divider ## Configuration ## Trackable Component This Component can be tracked. [Read more about Tracking](https://www.eonshowroom.eon.com/en/aem-basics/tracking.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_7-1%3A2-1?fmt=webp-alpha) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/readmore_add%3A1-1?fmt=webp) ### Add Read More Component The Read More Component can be added to a Grid Control like other Components. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/readmore_config%3A1-1?fmt=webp) ### Configure Read More Component In Editor Dialog of it, Label of Read More and Read Less Button can be added. Furthermore, Editor can choose, if it should be expanded at the Beginning, as well as Fade Effect can be used. If it should contain a Table, Editor can add an Amount of Rows that should be visible at the Beginning. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/readmore_color%3A3-4?fmt=webp) ### Adjust Color of Read More Component There is an "Adjust Color Scheme" Option. But for E.ON Theme, per Background Color, only one Color is choosable. Therefore, it is not recommanded to use it for E.ON Theme. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/readmore_parsys%3A2-1?fmt=webp) ### Add Content to Read More Component After Read More Component is configured, in Parsys Text or Table Components can be added. The Read More Divider is added automatically. Everything in Parsys before the Devider will be shown and everything after it not, if it is collapsed. **Keep in Mind:** Do not add more than one Element after the Divider as additional Elements will never be shown to the User.