Hey there, I'm new to HTML/CSS and recently started using a bootstrap template for my small company's website. Everything has been going smoothly except for one section that I'm struggling with. Instead of trying to explain it, I'll just show you the issue here.
var i = 0;
function solar() {
if (!i) {
document.getElementById("more5").style.display = "inline";
document.getElementById("dots5").style.display = "none";
document.getElementById("solar").innerHTML = "Read Less"
i = 1;
} else {
document.getElementById("more5").style.display = "none";
document.getElementById("dots5").style.display = "inline";
document.getElementById("solar").innerHTML = "Read More";
i = 0;
}
}<div class="row">
<div class="col-md-4 ">
<div class="box ">
<div class="img-box">
<img src="images/solar.png" alt="solar">
</div>
<div class="detail-box">
<h5>
Solar Panel Systems
</h5>
<p>
Have something specific in mind that isn't on our site? Need advice on devices or solar panels? Contact us for free consultations and expertise!<span id="dots5"> ...</span><span id="more5" style="display: none;"> We are here to help with any questions or concerns you may have.</span>
</p>
<button type="button" id="solar" onclick="solar()">Read More</button>
</div>
</div>
</div>
</div>