> For the complete documentation index, see [llms.txt](https://bubble.digital-bird.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bubble.digital-bird.com/plugins/inverted-repeatinggroup-chat-app.md).

# Inverted RepeatingGroup (for Chat app)

## 🔗 Links

> [Demo](https://digitaleyedemo.bubbleapps.io/inverted_rg) | [Editor](https://bubble.io/page?type=page\&name=inverted_rg\&id=digitaleyedemo\&tab=tabs-1)

> [Plugin page](https://bubble.io/plugin/inverted-repeating-group-like-chat-1614516761794x182777501586030600)

> [Forum](https://forum.bubble.io/t/new-plugin-inverted-repeating-group-like-a-chat-app/138847)

## ℹ️ Introduction

Plugin allows to revert the Repeating Group elements ordering. So to see / load next items in the list you have to scroll to the top (instead of scrolling to the bottom).

![](/files/-MXgB7wmJ6x5TTnL2w33)

Use case: any chat / messaging app (e.g. Facebook, Telegram, WhatsApp...). The latest message showed on the bottom and you have to scroll to the top to load older ones.

## 🔥 Features

* Revert the Repeating group elements order and change the scroll behaviour
* Show scrollbar on the left (or right) side of the Repeating Group
* Hide/Show scrollbar

## 📚 Documentation

**Pre-requirements:**

1. Install and configure Classify plugin:

{% content-ref url="/pages/-MXfykQSfukoAWO5UBlp" %}
[How to add a custom class or an ID to a Bubble element](/classify.md)
{% endcontent-ref %}

2\. Add a Repeating Group and define an ID:

![](/files/-MXgBc1AdPvJmTiIvSWB)

Now when you have a Repeating Group on your page:

1. Add the "Inverted Repeating Group" element on your app page and copy paste the ID.
2. Define following parameters:

* **ID** (text): Same ID from the step 1
* **Invert Repeating group** (yes/no): Revert the Repeating group elements order and change the scroll behaviour
* **Scrollbar on the left** (yes/no): Show scrollbar on the left/right side of the Repeating Group
* **Hide scrollbar** (yes/no): Hide/Show scrollbar. Please note that this option may not work properly in some browsers

![](/files/-MXgBwoq4PqkRasQj95h)