How To Create a “Show More” Button in Hostinger Website Builder
Adding a “Show More” button in Hostinger Website Builder is a great way to keep your pages clean while allowing users to access additional content when needed. In this guide, I’ll show you step by step how to insert and customize this feature using Hostinger Website Builder.
Step 1: Log in to Hostinger Website Builder
To begin, log in to your Hostinger account and navigate to the Websites section. From there:
- Click on Websites in your dashboard.
- Select the website you want to edit.
- Click on Edit Website to open the website builder.
Step 2: Add a Custom Code Element
Since the “Show More” button requires a small piece of code, we’ll use the Custom Code element.
- Click on Add Element from the left menu.
- Scroll down and find the Embedded Code option.
- Drag and drop it into the section where you want to place the button.
Step 3: Insert the Code for the Show More Button
Now, you’ll need to add the following code snippet inside the Embedded Code section:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learn More Button</title>
<style>
.hidden {
display: none;
}
.section-container {
border: 2px solid black;
padding: 15px;
border-radius: 5px;
max-width: 400px;
margin: 20px auto;
}
.learn-more-btn {
padding: 10px 15px;
background-color: black;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
border-radius: 5px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="section-container">
<p>This is a brief introduction. Click below to learn more.</p>
<p id="moreInfo" class="hidden">Here is the additional information that was hidden before.</p>
<button class="learn-more-btn" onclick="toggleInfo()" id="toggleButton">Learn More</button>
</div>
<script>
function toggleInfo() {
var info = document.getElementById("moreInfo");
var button = document.getElementById("toggleButton");
if (info.style.display === "none" || info.classList.contains("hidden")) {
info.style.display = "block";
info.classList.remove("hidden");
button.textContent = "Show Less";
} else {
info.style.display = "none";
info.classList.add("hidden");
button.textContent = "Learn More";
}
}
</script>
</body>
</html>
Step 4: Customize the Button Appearance
To modify the button color, text, or border, you can edit the following parts of the code:
- Change the button text: Find
<button class="toggle-button">Show More</button>and replace the text inside the tags. - Modify the border: Locate
border: 2px solid black;and change the color to your preference. - Change the button color: Update
background-color: blue;to any color you like.
Step 5: Save and Publish Your Changes
After making your adjustments:
- Click Update to save your changes.
- Preview the website to test the button functionality.
- If needed, make further adjustments and republish.
Conclusion
Adding a Show More button in Hostinger Website Builder enhances user experience by keeping your website clean and interactive. By following this guide, you now know how to insert, customize, and optimize this feature easily.
If you want to learn more about Hostinger Website Builder, check out my free online course at university.bensexperience.com. Happy building!
