---
title: "Read more element"
date: "2019-07-11T11:02:20+00:00"
summary: "Easily hide and show content with the Read more element in Site Studio. Learn how to locate, customize, and style this versatile tool for creating interactive web pages."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/read-more-element"
id: "d33fec7d-e981-4ccd-a918-14ba77bc7bbe"
---

Table of contents will be added

Use the Read more element to hide and show more content on the click of a button.

Locating the read more element
------------------------------

To locate the Read more element:

1.  Navigate to a component or a template with the Layout canvas
2.  Click the **+ button** on the Layout canvas
3.  Within the Elements tab, look for the Read more element.

![145e83ca-Read-more-element.png](https://acquia.widen.net/content/23ad7fc7-17d9-4176-ad99-4596f6fec898/web/145e83ca-Read-more-element.png)

The Read more element includes the following groups of fields:

Button
------

*   **Button text (collapsed)** \- Set the button text when the read more is collapsed 
*   **Button text (expanded)** - Set the button text when the read more is expanded 
*   **Button style** - Set a button custom style

jQuery animation 
-----------------

*   **jQuery animation** - Set a jQuery animation to be applied when the Read more element is expanding or collapsing

Initial state
-------------

*   **Initially hidden** \- Hide the Read more content on page load
*   **Initially visible** - Show the Read more content on page load.

Custom style
------------

*   **Layout style -** Apply a Layout custom style to your Read more element.

Match heights
-------------

*   **Match heights** \- Match the height of the element using:
    *   **None** - Removes the match heights at the specific breakpoint
    *   **Class** \- Match the height of the element with another element with the same class name
    *   **Children with class** - Match the heights of any child elements with the same class name
    *   **Child element** - Match the heights of all child elements of the same type.

For more information on Match heights, see [Match the heights of elements.](/drupal-starter-kits/add-ons/site-studio/match-heights-elements "Match the heights of elements")

Comments
--------

*   **Add comments -** Add comments to the Element.  For more information, see [Adding comments to an element](/drupal-starter-kits/add-ons/site-studio/adding-comments-element "Adding comments to an element").