I am trying to write a read more. It is working for the most part, except that the Divs that are supposed to be completely closed, are still showing the first line of text.
I made a codepen https://codepen.io/justinblayney/pen/JjpZeJK
It is a bit complicated, in mobile view 5 divs need to be hidden behind a read more toggle, it desktop view they are always visible with a completely different layout which I use css grid to accomplish (which is why i don't wrap them into one div).
if you view my link above, make sure you are under 768px you will see at the bottom
Read More
Device compatibility
Country available
Year established
Licensed in
Support
Only "Read more" should be showing, the rest should open on the toggle, but instead the title(strong) is showing and only the content(span) is hidden. I want both and title and content hidden until it toggles.
They all have the code below, but it is not 0px
max-height: 0px;
overflow: hidden;
transition: max-height 0.2s ease-out;
The issue is that overflow: hidden isn't hiding your padding - you need to remove the padding from your divs when hidden, and add it back in when they are rendered
You can do this like so (ln 121 of your demo):
&__desktop, &__mobile, &__payout, &__currency, &__banking, &__platforms, &__countries, &__established, &__licensed, &__support, &__readmore {
//...
&.active {
padding: 0px 40px 20px 40px;
}
// ....
}
Aside: if you want to simplify your JS, here's a starting point:
const accordionEls = document.getElementsByClassName("accordion");
// add an event listener to each element, using a named function definition
Array.from(accordionEls).map(element => {
element.addEventListener("click", toggleVisibility)
});
function toggleVisibility(event) {
// get the element that the event was attached to out of the event object
const { currentTarget } = event;
// generate .review_page__ classnames
const classNames = [
"platforms",
"countries",
"licensed",
"support",
"established"
].map(name => `.review_page__${name}`);
// get the elements with those class names, filtering any null
// values out of the list
const toggleElements = classNames
.map(className => document.querySelector(className))
.filter(Boolean);
// set the .active class on the read more button
currentTarget.classList.toggle("active");
// loop over each element, switching its max height
toggleElements.map(el => {
const currentMaxHeight = el.style.maxHeight;
const maxHeight = currentMaxHeight ? null : `${el.scrollHeight}px`;
el.style.maxHeight = maxHeight;
});
}