max-height for read more is not respecting 0px from css-CodePudding

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

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;

CodePudding user response：

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;
  });
}

CodePudding user response：

you will first need to install jQuery. then add class .hidden to all the divs you want to toggle. write this CSS

.hidden {
display: none;
}

then write js script

$('.accordion').click(function() {
  $('.hidden').slideToggle();
})