CREATE EXPANDABLE TEXT CONTENT BOX IN WEEBLY
|
How do I create a read more box to show additional content on my Weebly website?
How do I create an accordion style text box in Weebly? How do I create collapsible and expandable content on my Weebly website? How do I create a read more link in Weebly that does not open to a new page? Can I create an accordion text box in my Weebly website without using an app? Can I create read more text boxes to display more content in Weebly? Answer: To create expandable, collapsible, accordian style, "read more" text boxes follow the simple instructions below. Difficulty: Easy - So this is relatively easy to do within Weebly and requires no coding skills at all. Skills: None - Just the ability to click, copy and paste into the correct sections and files. Time to complete: Quick <5 mins (less than 5 minutes) NOTES: For this example I have included a clean code, with black text on a white background but you can change these colours quite simply. And you can change the Read More text to any text you want i.e. expand content, read more, something about add topic, a question, etc. FINAL NOTE: When you have installed the CSS and Javascript (Just the once), all you need to do is add the html and your text to any page on your website. |
HERES THE SIMPLE OPTIONJust drag and drop </> Embed Code tile on to your page and add the following code:
<p><a href="#" onclick="toggleContent(); return false;">CLICK TO SHOW CONTENT</a></p> <div style="display: none;" id="content"> <p>This is the content to reveal, show and hide, expand and collapse or simply open up to read more.</p> </div> <script> function toggleContent() { var content = document.getElementById("content"); if (content.style.display === "none") { content.style.display = "block"; // Show content } else { content.style.display = "none"; // Hide content } } </script> NOTE: ONLY ONE COLLAPSIBLE BOX PER PAGE WITH THIS OPTION
THE CODE IN ACTION |
STEP 1 - Embed COde THE HTML CODE
STEP ONE
Using the embed code </> drag and drop the tile add this to the section of the page where you want your collapsible / expandanble content to appear. Copy and paste this code and add content where needed. I have added the main content types. Title, Text, Bullet Points, Image and Link.
Feel free to add <br> and </br> to add space to content.
Feel free to add <br> and </br> to add space to content.
<button type="button" class="collapsible">Read More</button>
<div class="content">
<h2>Add your Title</h2>
<ul>
<li>bullet point one</li>
<li>bullet point two</li>
</ul>
<br></br>
<img src="picture.jpg" width="200" height="100" alt="add your image description">
<p>Add your content here</p>
Here you can add a link to <a href="url">link text</a>
</div>
<div class="content">
<h2>Add your Title</h2>
<ul>
<li>bullet point one</li>
<li>bullet point two</li>
</ul>
<br></br>
<img src="picture.jpg" width="200" height="100" alt="add your image description">
<p>Add your content here</p>
Here you can add a link to <a href="url">link text</a>
</div>
STEP 2 - ADD THE CSS CODE
STEP TWO
Go to Theme / Edit HTML / CSS ( bottom left).
Find CSS files - it maybe named - Global.css or Main.css or Main.less or Page-type.less.
Copy and Paste this code into this file.
Be sure not to accidentally paste over other code in this section. I just add it to the top and keep the code comments so I know what and where it is, for future reference. Here you can also change the alignment, font sizes and colours.
Find CSS files - it maybe named - Global.css or Main.css or Main.less or Page-type.less.
Copy and Paste this code into this file.
Be sure not to accidentally paste over other code in this section. I just add it to the top and keep the code comments so I know what and where it is, for future reference. Here you can also change the alignment, font sizes and colours.
/* Style the button that is used to open and close the collapsible content */
.collapsible {
background-color: #ffffff;
color: #000000;
cursor: pointer;
padding: 10px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 18px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
background-color: #ffffff;
}
/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #fff;
}
.collapsible {
background-color: #ffffff;
color: #000000;
cursor: pointer;
padding: 10px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 18px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
background-color: #ffffff;
}
/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #fff;
}
STEP 3 - ADD THE JAVASCRIPT
STEP THREE
Copy and paste the code into the file custom.js located under EDIT HTML / CSS
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
