Read More Less Toggle
### Step 1: Add Custom CSS
First, you'll need to hide the overflowing text. Add the following CSS to your Elementor page’s custom CSS section:
1. **Go to your page settings in Elementor**.
2. **Navigate to the 'Advanced' tab**.
3. **Add the following CSS in the Custom CSS section:**
.read-more-content {
overflow: hidden;
height: 100px; /* Adjust height to your preferred visible text height */
transition: height 0.3s ease;
}
.read-more-content.open {
height: auto;
}
.read-more-btn {
display: block;
cursor: pointer;
color: #0073e6;
text-decoration: underline;
}### Step 2: Add Custom JavaScript
Next, add the JavaScript needed to toggle the content visibility.
1. **Navigate to the page’s settings in Elementor**.
2. **Go to the 'Advanced' tab** and add the following JavaScript in the **Custom JS** or within an HTML widget:
document.addEventListener('DOMContentLoaded', function() {
const readMoreBtns = document.querySelectorAll('.read-more-btn');
readMoreBtns.forEach(function(btn) {
btn.addEventListener('click', function() {
const content = this.previousElementSibling;
content.classList.toggle('open');
if (content.classList.contains('open')) {
this.textContent = 'Read Less';
} else {
this.textContent = 'Read More';
}
});
});
});### Step 3: Update the Elementor Text Editor Widget
Now, you need to modify the content inside the Elementor Text Editor widget to use the class for the toggling effect:
1. **Open your page in Elementor**.
2. **Edit the Text Editor widget**.
3. Wrap the text you want to hide initially inside a container with the `read-more-content` class, and add a "Read More" button like so:
<div class="read-more-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<a href="javascript:void(0);" class="read-more-btn">Read More</a>### Step 4: Adjust the Layout
– If needed, you can customize the visible height of the `.read-more-content` element (i.e., change `height: 100px;` in the CSS to suit the amount of content you want visible initially).
– Adjust the text for the "Read More" and "Read Less" buttons in the JS code to suit your needs.
Now, when users click "Read More", the extra content will be revealed, and the button will toggle to "Read Less" to collapse the content back.
This method should work well for Elementor pages and can be applied to any text widget.
### Step 1: Add Custom CSS to the Page
1. Go to the **Advanced** tab of your page in Elementor.
2. In the **Custom CSS** section, add the following CSS to style the content and the "Read More" button:
/* Hide extra content by default */
.read-more-content {
overflow: hidden;
height: 100px; /* Adjust to control the initial visible height */
transition: height 0.3s ease;
}
.read-more-content.open {
height: auto;
}
/* Style for Read More/Read Less button */
.read-more-btn {
cursor: pointer;
color: #0073e6;
text-decoration: underline;
}### Step 2: Edit the Text Editor Widget Content
1. In your **Text Editor widget**, add the HTML structure directly in the widget’s editor. You need to wrap the part of the content that you want to hide initially in a `div` with the class `.read-more-content`. Below that, add the "Read More" button.
Here's an example of how you can structure the content inside the Text Editor widget:
<div class="read-more-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<a href="javascript:void(0);" class="read-more-btn">Read More</a>### Step 3: Add JavaScript to Handle the Toggle
1. If you want to add custom JavaScript for the "Read More/Read Less" functionality, you can either add it to the **Custom HTML** widget or in the **Custom JS** section (if you're using the pro version of Elementor).
Here’s the JavaScript to toggle the content:
document.addEventListener('DOMContentLoaded', function() {
const readMoreBtns = document.querySelectorAll('.read-more-btn');
readMoreBtns.forEach(function(btn) {
btn.addEventListener('click', function() {
const content = this.previousElementSibling; // Grabs the content div (previous sibling)
content.classList.toggle('open');
// Toggle button text between "Read More" and "Read Less"
if (content.classList.contains('open')) {
this.textContent = 'Read Less';
} else {
this.textContent = 'Read More';
}
});
});
});### Step 4: Save and Test
– **Save** your changes and preview the page. You should see a "Read More" link below the text. Initially, only a portion of the content will be visible (based on the height you set in the CSS). When users click "Read More", the rest of the text will be revealed, and the button will toggle to "Read Less".
– Adjust the height (in CSS) or text (in JavaScript) as needed to suit your layout.
### Optional: Customizing the Design
– You can further customize the appearance of the "Read More" button by adjusting the CSS styles (e.g., color, font size, etc.).
– You can also adjust the visible text height by modifying the `height: 100px;` property in the `.read-more-content` class.
This approach should work seamlessly with Elementor's Text Editor widget and provide a clean, functional "Read More/Read Less" toggle.
### Step 1: Add Custom CSS
Ensure that you have the following CSS to control the hiding and showing of the text and style the button:
/* Hide extra content by default */
.read-more-content {
overflow: hidden;
height: 100px; /* Adjust to control the initial visible height */
transition: height 0.3s ease;
}
.read-more-content.open {
height: auto;
}
/* Style for the Read More button */
.read-more-btn {
cursor: pointer;
color: #0073e6;
text-decoration: underline;
}### Step 2: Edit the Text Editor Widget Content
In the **Text Editor widget**, wrap the content you want to hide initially in a `div` with the class `.read-more-content`. Below that, add a button with the class `.read-more-btn`.
Here’s an example:
<div class="read-more-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<button class="read-more-btn">Read More</button>### Step 3: Add JavaScript for Toggling the Content
Use the following JavaScript to handle the button click and toggle the content between "Read More" and "Read Less":
document.addEventListener('DOMContentLoaded', function() {
const readMoreBtns = document.querySelectorAll('.read-more-btn');
readMoreBtns.forEach(function(btn) {
btn.addEventListener('click', function() {
const content = this.previousElementSibling; // Grabs the content div (previous sibling)
content.classList.toggle('open');
// Toggle button text between "Read More" and "Read Less"
if (content.classList.contains('open')) {
this.textContent = 'Read Less';
} else {
this.textContent = 'Read More';
}
});
});
});### Step 4: Save and Test
1. **Save** your changes and preview the page.
2. Initially, the content will be truncated (according to the height set in the `.read-more-content` CSS).
3. When users click the "Read More" button, the remaining content will appear, and the button will toggle to "Read Less" to collapse it back.
Now your "Read More/Read Less" functionality should work with a button in the Elementor Text Editor widget!