Hi there,
How can I add Read more… link/dropdown text to div.term-description (product categories)? I have alot of text for these categories and I would like to hide most of the text.
Is there a possibility to make the Read more… without using JS so it would be done with HTML and CSS?
So then search engine optimization would’t be bothered as much.
I can get this working with this for example in https://www.sukat.com/naisten-sukat/ page :
<h1>Naisten sukat – Laadukkaat ja monipuoliset sukat joka tilanteeseen</h1>
Löydä täydelliset naisten sukat! Toimitamme ne nopeasti suoraan postilaatikkoosi tai lähimpään postiin.
<div class="visible-text"><i class="fa fa-check" aria-hidden="true"></i> <strong>Toimitus</strong> alkaen 0 €
<i class="fa fa-check" aria-hidden="true"></i> <strong>Laadukas</strong> ja kattava valikoima
<i class="fa fa-check" aria-hidden="true"></i> <strong>Turvalliset</strong> maksutavat
<i class="fa fa-check" aria-hidden="true"></i> <strong>Suomalainen</strong> sukkaverkkokauppa
<a class="read-more" href="#">Lue lisää</a></div>
<div class="hidden-text">
.
.
.
</div>
And adding this to Global Custom CSS:
.hidden-text {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-in-out;
}
.read-more {
display: inline-block;
cursor: pointer;
color: #0073aa;
font-weight: bold;
margin-top: 10px;
}
And this code to Global Custom JS:
document.addEventListener("DOMContentLoaded", function() {
var readMoreButton = document.querySelector(".read-more");
var hiddenText = document.querySelector(".hidden-text");
readMoreButton.addEventListener("click", function(e) {
e.preventDefault();
hiddenText.style.maxHeight = hiddenText.scrollHeight + "px";
this.style.display = "none"; // Piilottaa "Lue lisää" -napin klikkauksen jälkeen
});
});
Best Regards,
Tuomo Nurkkala
.
