diff --git a/app/assets/stylesheets/css/fields/trix.css b/app/assets/stylesheets/css/fields/trix.css
index 7e7929820..7d4113b82 100644
--- a/app/assets/stylesheets/css/fields/trix.css
+++ b/app/assets/stylesheets/css/fields/trix.css
@@ -1,5 +1,14 @@
 @import './../../../../../node_modules/trix/dist/trix.css';
 
+.trix-content.hidden {
+  display: block !important;
+  clip-path: inset(0 0 calc(100% - 50px) 0);
+  -webkit-mask-image: linear-gradient(to bottom, black 30px, transparent 50px);
+  mask-image: linear-gradient(to bottom, black 30px, transparent 50px);
+  max-height: 50px;
+  min-height: 0px;
+}
+
 .trix-content h1 {
   @apply text-xl font-bold mb-2;
 }
diff --git a/app/components/avo/fields/trix_field/show_component.html.erb b/app/components/avo/fields/trix_field/show_component.html.erb
index 7b7d310ef..f4e245781 100644
--- a/app/components/avo/fields/trix_field/show_component.html.erb
+++ b/app/components/avo/fields/trix_field/show_component.html.erb
@@ -2,13 +2,19 @@
   <%
     content_classes = 'trix-content py-2 max-w-4xl'
     content_classes << ' hidden' unless @field.always_show
+    button_classes = 'font-bold inline-block pt-3'
   %>
-  <div data-controller="hidden-input">
-    <% unless @field.always_show %>
-      <%= link_to t('avo.show_content'), 'javascript:void(0);', class: 'font-bold inline-block', data: { action: 'click->hidden-input#showContent' } %>
-    <% end %>
-    <div class="<%= content_classes %> " data-hidden-input-target="content">
+  <div data-controller="trix-body">
+    <div class="<%= content_classes %>" data-trix-body-target="content">
       <%= sanitize @field.value.to_s %>
     </div>
+    <% unless @field.always_show %>
+      <div class="hidden" data-trix-body-target="moreContentButton">
+        <%= link_to t('avo.more_content'), 'javascript:void(0);', class: button_classes, data: { action: 'click->trix-body#toggleContent' } %>
+      </div>
+      <div class="hidden" data-trix-body-target="lessContentButton">
+        <%= link_to t('avo.less_content'), 'javascript:void(0);', class: button_classes, data: { action: 'click->trix-body#toggleContent' } %>
+      </div>
+    <% end %>
   </div>
 <% end %>
diff --git a/app/javascript/js/controllers.js b/app/javascript/js/controllers.js
index 9ccde231f..de91a986b 100644
--- a/app/javascript/js/controllers.js
+++ b/app/javascript/js/controllers.js
@@ -45,6 +45,7 @@ import TextFilterController from './controllers/text_filter_controller'
 import TippyController from './controllers/tippy_controller'
 import TiptapFieldController from './controllers/fields/tiptap_field_controller'
 import ToggleController from './controllers/toggle_controller'
+import TrixBodyController from './controllers/trix_body_controller'
 import TrixFieldController from './controllers/fields/trix_field_controller'
 
 application.register('action', ActionController)
@@ -83,6 +84,7 @@ application.register('table-row', TableRowController)
 application.register('text-filter', TextFilterController)
 application.register('tippy', TippyController)
 application.register('toggle', ToggleController)
+application.register('trix-body', TrixBodyController)
 
 // Field controllers
 application.register('belongs-to-field', BelongsToFieldController)
diff --git a/app/javascript/js/controllers/trix_body_controller.js b/app/javascript/js/controllers/trix_body_controller.js
new file mode 100644
index 000000000..a63860c5b
--- /dev/null
+++ b/app/javascript/js/controllers/trix_body_controller.js
@@ -0,0 +1,27 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['content', 'moreContentButton', 'lessContentButton']
+
+  connect() {
+    this.checkContentHeight()
+  }
+
+  checkContentHeight() {
+    const contentHeight = this.contentTarget.scrollHeight
+
+    if (contentHeight > 50) {
+      this.moreContentButtonTarget.classList.remove('hidden')
+    }
+  }
+
+  toggleContent() {
+    this.contentTarget.classList.toggle('hidden')
+    this.toggleButtons()
+  }
+
+  toggleButtons() {
+    this.moreContentButtonTarget.classList.toggle('hidden')
+    this.lessContentButtonTarget.classList.toggle('hidden')
+  }
+}
diff --git a/lib/generators/avo/templates/locales/avo.ar.yml b/lib/generators/avo/templates/locales/avo.ar.yml
index a2c647d25..ce63682e2 100644
--- a/lib/generators/avo/templates/locales/avo.ar.yml
+++ b/lib/generators/avo/templates/locales/avo.ar.yml
@@ -67,9 +67,11 @@ ar:
       key: المفتاح
       reorder_row: إعادة ترتيب الصف
       value: القيمة
+    less_content: محتوى أقل
     list_is_empty: القائمة فارغة
     loading: جاري التحميل
     more: المزيد
+    more_content: المزيد من المحتوى
     new: جديد
     next_page: الصفحة التالية
     no_cancel: لا، إلغاء
diff --git a/lib/generators/avo/templates/locales/avo.de.yml b/lib/generators/avo/templates/locales/avo.de.yml
index 27a73c63c..aaaf57baf 100644
--- a/lib/generators/avo/templates/locales/avo.de.yml
+++ b/lib/generators/avo/templates/locales/avo.de.yml
@@ -98,6 +98,8 @@ de:
     select_all_matching: Alle übereinstimmenden auswählen
     select_item: Eintrag auswählen
     show_content: Inhalt anzeigen
+    more_content: Mehr Inhalt
+    less_content: Weniger Inhalt
     sign_out: Abmelden
     switch_to_view: Wechseln zur %{view_type}-Ansicht
     table_view: Tabellenansicht
diff --git a/lib/generators/avo/templates/locales/avo.en.yml b/lib/generators/avo/templates/locales/avo.en.yml
index 1da343181..2935b6799 100644
--- a/lib/generators/avo/templates/locales/avo.en.yml
+++ b/lib/generators/avo/templates/locales/avo.en.yml
@@ -57,9 +57,11 @@ en:
       key: Key
       reorder_row: Reorder row
       value: Value
+    less_content: Less content
     list_is_empty: List is empty
     loading: Loading
     more: More
+    more_content: More content
     new: new
     next_page: Next page
     no_cancel: No, cancel
diff --git a/lib/generators/avo/templates/locales/avo.es.yml b/lib/generators/avo/templates/locales/avo.es.yml
index e3f66f5cd..ac3eeca38 100644
--- a/lib/generators/avo/templates/locales/avo.es.yml
+++ b/lib/generators/avo/templates/locales/avo.es.yml
@@ -59,9 +59,11 @@ es:
       key: Clave
       reorder_row: Reordenar fila
       value: Valor
+    less_content: Menos contenido
     list_is_empty: La lista está vacía
     loading: Cargando
     more: Más
+    more_content: Más contenido
     new: nuevo/a
     next_page: Página siguiente
     no_cancel: No, cancelar
diff --git a/lib/generators/avo/templates/locales/avo.fr.yml b/lib/generators/avo/templates/locales/avo.fr.yml
index 9878590b2..b9b88a40f 100644
--- a/lib/generators/avo/templates/locales/avo.fr.yml
+++ b/lib/generators/avo/templates/locales/avo.fr.yml
@@ -59,9 +59,11 @@ fr:
       key: Clé
       reorder_row: Réorganiser la ligne
       value: Valeur
+    less_content: Moins de contenu
     list_is_empty: La liste est vide
     loading: Chargement
     more: Plus
+    more_content: Plus de contenu
     new: Nouveau
     next_page: Page suivante
     no_cancel: Non, annuler
diff --git a/lib/generators/avo/templates/locales/avo.it.yml b/lib/generators/avo/templates/locales/avo.it.yml
index a7365446d..29dc1ff5b 100644
--- a/lib/generators/avo/templates/locales/avo.it.yml
+++ b/lib/generators/avo/templates/locales/avo.it.yml
@@ -98,6 +98,8 @@ it:
     select_all_matching: Seleziona tutto corrispondente
     select_item: Seleziona elemento
     show_content: Mostra contenuto
+    more_content: Più contenuti
+    less_content: Meno contenuti
     sign_out: Esci
     switch_to_view: Passa a vista %{view_type}
     table_view: Vista tabella
diff --git a/lib/generators/avo/templates/locales/avo.ja.yml b/lib/generators/avo/templates/locales/avo.ja.yml
index 5b2f826c7..66c49eed4 100644
--- a/lib/generators/avo/templates/locales/avo.ja.yml
+++ b/lib/generators/avo/templates/locales/avo.ja.yml
@@ -59,9 +59,11 @@ ja:
       key: キー
       reorder_row: 行の並べ替え
       value: 値
+    less_content: コンテンツが少ない
     list_is_empty: リストは空です
     loading: 読み込み中
     more: もっと
+    more_content: さらなるコンテンツ
     new: 新規
     next_page: 次のページ
     no_cancel: いいえ、キャンセル
diff --git a/lib/generators/avo/templates/locales/avo.nb.yml b/lib/generators/avo/templates/locales/avo.nb.yml
index f1ec5c0f8..1828f8d6a 100644
--- a/lib/generators/avo/templates/locales/avo.nb.yml
+++ b/lib/generators/avo/templates/locales/avo.nb.yml
@@ -59,9 +59,11 @@ nb:
       key: Nøkkel
       reorder_row: Omorganiser rad
       value: Verdi
+    less_content: Mindre innhold
     list_is_empty: Listen er tom
     loading: Laster
     more: Mer
+    more_content: Mer innhold
     new: ny
     next_page: Neste side
     no_cancel: Nei, avbryt
diff --git a/lib/generators/avo/templates/locales/avo.nl.yml b/lib/generators/avo/templates/locales/avo.nl.yml
index b5674cdda..f901f873e 100644
--- a/lib/generators/avo/templates/locales/avo.nl.yml
+++ b/lib/generators/avo/templates/locales/avo.nl.yml
@@ -98,6 +98,8 @@ nl:
     select_all_matching: Alles selecteren wat overeenkomt
     select_item: Item selecteren
     show_content: Inhoud tonen
+    more_content: Meer inhoud
+    less_content: Minder inhoud
     sign_out: Afmelden
     switch_to_view: Schakelen naar %{view_type}-weergave
     table_view: Tabelweergave
diff --git a/lib/generators/avo/templates/locales/avo.nn.yml b/lib/generators/avo/templates/locales/avo.nn.yml
index e1b2a9ace..80661896a 100644
--- a/lib/generators/avo/templates/locales/avo.nn.yml
+++ b/lib/generators/avo/templates/locales/avo.nn.yml
@@ -59,9 +59,11 @@ nn:
       key: Nøkkel
       reorder_row: Omorganiser rad
       value: Verdi
+    less_content: Mindre innhold
     list_is_empty: Lista er tom
     loading: Lastar
     more: Meir
+    more_content: Mer innhold
     new: ny
     next_page: Neste side
     no_cancel: Nei, avbryt
diff --git a/lib/generators/avo/templates/locales/avo.pl.yml b/lib/generators/avo/templates/locales/avo.pl.yml
index 2d4283823..409254c60 100644
--- a/lib/generators/avo/templates/locales/avo.pl.yml
+++ b/lib/generators/avo/templates/locales/avo.pl.yml
@@ -100,6 +100,8 @@ pl:
     select_all_matching: Zaznacz wszystkie pasujące
     select_item: Wybierz element
     show_content: Pokaż zawartość
+    more_content: Pokaż wiecej
+    less_content: Pokaż mniej
     sign_out: Wyloguj się
     switch_to_view: Przełącz na widok %{view_type}
     table_view: Widok tabelaryczny
diff --git a/lib/generators/avo/templates/locales/avo.pt-BR.yml b/lib/generators/avo/templates/locales/avo.pt-BR.yml
index b84a430e4..03e674aee 100644
--- a/lib/generators/avo/templates/locales/avo.pt-BR.yml
+++ b/lib/generators/avo/templates/locales/avo.pt-BR.yml
@@ -59,9 +59,11 @@ pt-BR:
       key: Chave
       reorder_row: Reordenar linha
       value: Valor
+    less_content: Menos conteúdo
     list_is_empty: Lista vazia
     loading: Carregando
     more: Mais
+    more_content: Mais conteúdo
     new: novo
     next_page: Próxima página
     no_cancel: Não, cancelar
diff --git a/lib/generators/avo/templates/locales/avo.pt.yml b/lib/generators/avo/templates/locales/avo.pt.yml
index 66bb12cd0..d668ca38e 100644
--- a/lib/generators/avo/templates/locales/avo.pt.yml
+++ b/lib/generators/avo/templates/locales/avo.pt.yml
@@ -59,9 +59,11 @@ pt:
       key: Chave
       reorder_row: Reordenar linha
       value: Valor
+    less_content: Menos conteúdo
     list_is_empty: Lista vazia
     loading: A carregar
     more: Mais
+    more_content: Mais conteúdo
     new: novo
     next_page: Próxima página
     no_cancel: Não, cancelar
diff --git a/lib/generators/avo/templates/locales/avo.ro.yml b/lib/generators/avo/templates/locales/avo.ro.yml
index b08beed5f..4ec49de2c 100644
--- a/lib/generators/avo/templates/locales/avo.ro.yml
+++ b/lib/generators/avo/templates/locales/avo.ro.yml
@@ -61,9 +61,11 @@ ro:
       key: Cheie
       reorder_row: Reordonează rând
       value: Valoare
+    less_content: Mai puțin conținut
     list_is_empty: Lista este goală
     loading: Se incarcă
     more: Mai multe
+    more_content: Mai mult conținut
     new: nou
     next_page: Pagina următoare
     no_cancel: Nu, anulează
diff --git a/lib/generators/avo/templates/locales/avo.ru.yml b/lib/generators/avo/templates/locales/avo.ru.yml
index cf5f776fc..7c12649bc 100644
--- a/lib/generators/avo/templates/locales/avo.ru.yml
+++ b/lib/generators/avo/templates/locales/avo.ru.yml
@@ -100,6 +100,8 @@ ru:
     select_all_matching: Выбрать все совпадающие
     select_item: Выбрать элемент
     show_content: Показать содержимое
+    more_content: Больше контента
+    less_content: Меньше контента
     sign_out: Выйти
     switch_to_view: Переключиться на вид %{view_type}
     table_view: Таблица
diff --git a/lib/generators/avo/templates/locales/avo.tr.yml b/lib/generators/avo/templates/locales/avo.tr.yml
index ca426a0c4..b6db24139 100644
--- a/lib/generators/avo/templates/locales/avo.tr.yml
+++ b/lib/generators/avo/templates/locales/avo.tr.yml
@@ -59,9 +59,11 @@ tr:
       key: Anahtar
       reorder_row: Satırı yeniden sırala
       value: Değer
+    less_content: Daha az içerik
     list_is_empty: Boş liste
     loading: Yükleniyor
     more: Daha fazla
+    more_content: Daha fazla içerik
     new: yeni
     next_page: Sonraki sayfa
     no_cancel: Hayır, iptal et
diff --git a/lib/generators/avo/templates/locales/avo.uk.yml b/lib/generators/avo/templates/locales/avo.uk.yml
index d517af0bb..2fad29afd 100644
--- a/lib/generators/avo/templates/locales/avo.uk.yml
+++ b/lib/generators/avo/templates/locales/avo.uk.yml
@@ -100,6 +100,8 @@ uk:
     select_all_matching: Вибрати всі відповідні
     select_item: Вибрати елемент
     show_content: Показати вміст
+    more_content: Більше вмісту
+    less_content: Менше вмісту
     sign_out: Вийти
     switch_to_view: Перейти до виду %{view_type}
     table_view: Таблиця
diff --git a/lib/generators/avo/templates/locales/avo.zh.yml b/lib/generators/avo/templates/locales/avo.zh.yml
index 3d83c9484..bc042d685 100644
--- a/lib/generators/avo/templates/locales/avo.zh.yml
+++ b/lib/generators/avo/templates/locales/avo.zh.yml
@@ -98,6 +98,8 @@ zh:
     select_all_matching: 选择所有匹配项
     select_item: 选择项目
     show_content: 显示内容
+    more_content: 更多内容
+    less_content: 内容较少
     sign_out: 登出
     switch_to_view: 切换到 %{view_type} 视图
     table_view: 表格视图
diff --git a/spec/dummy/config/locales/avo.en.yml b/spec/dummy/config/locales/avo.en.yml
index 9f2ce70e5..2ce95f70b 100644
--- a/spec/dummy/config/locales/avo.en.yml
+++ b/spec/dummy/config/locales/avo.en.yml
@@ -99,6 +99,8 @@ en:
     select_all_matching: Select all matching
     select_item: Select item
     show_content: Show content
+    more_content: More content
+    less_content: Less content
     sign_out: Sign out
     switch_to_view: Switch to %{view_type} view
     table_view: Table view
diff --git a/spec/system/avo/trix_field_spec.rb b/spec/system/avo/trix_field_spec.rb
index 88f4a12c5..eca1efb4e 100644
--- a/spec/system/avo/trix_field_spec.rb
+++ b/spec/system/avo/trix_field_spec.rb
@@ -31,8 +31,6 @@
 
         save
 
-        click_on "Show content"
-
         expect(find_field_value_element("body")).to have_text "Works for us!!!"
       end
 
@@ -59,10 +57,46 @@
       it "displays the posts body" do
         visit "/admin/resources/posts/#{post.id}"
 
-        click_on "Show content"
-
+        expect(page).not_to have_link("More content", href: "javascript:void(0);")
         expect(find_field_value_element("body")).to have_text ActionView::Base.full_sanitizer.sanitize(body)
       end
+
+      context "when body has more then 1 line" do
+        let!(:body) do
+          <<~HTML
+            <div>test1</div>
+            <div>test2</div>
+            <div>test3</div>
+            <div>test4</div>
+            <div>test5</div>
+          HTML
+        end
+
+        it "displays correct button" do
+          visit "/admin/resources/posts/#{post.id}"
+
+          expect(page).to have_link("More content", href: "javascript:void(0);")
+
+          click_on "More content"
+
+          expect(page).to have_link("Less content", href: "javascript:void(0);")
+
+          click_on "Less content"
+        end
+
+        it "always_show" do
+          Avo::Resources::Post.with_temporary_items do
+            field :body, as: :trix, always_show: true
+          end
+
+          visit "/admin/resources/posts/#{post.id}"
+
+          expect(page).not_to have_link("More content", href: "javascript:void(0);")
+          expect(page).not_to have_link("Less content", href: "javascript:void(0);")
+
+          Avo::Resources::Post.restore_items_from_backup
+        end
+      end
     end
 
     context "edit" do
@@ -86,7 +120,6 @@
         fill_in_trix_editor "trix_post_body", with: "New example!"
 
         save
-        click_on "Show content"
 
         expect(find_field_value_element("body")).to have_text "New example!"
       end