I am trying to make an faq page with collapsible divs. I am trying to add padding to the content that will appear when you open the collapsible div. However, the padding makes the content div show even though max-height
is set to 0
and I have box-sizing
set to border-box
.
There was another StackOverflow page about this. The solution suggests that I use display-block
. However, that didn't work for me.
Here is the css:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400&display=swap');
.container {
background-color: #FFF;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 12px;
margin: 20px 200px;
}
.question {
cursor: pointer;
padding: 20px;
}
.question h1 {
font-family: "Inter", sans-serif;
font-size: 32px;
}
.content {
padding: 20px;
box-sizing: border-box;
max-height: 0;
overflow: hidden;
transition: all .2s cubic-bezier(0,1,0,1);
}
.content.show {
padding: 20px;
max-height: 100px;
transition: all .2s cubic-bezier(1,0,1,0);
}
Here is the jsx:
import React from "react";
import classes from "./Accordion.module.css";
import { useState } from "react";
function Accordion(props) {
const [selected, setSelected] = useState(null);
const toggle = (i) => {
if (selected === i) {
return setSelected(null)
}
setSelected(i)
}
return (
<div className={classes.container}>
<div className={classes.question} onClick= {() => toggle(props.index)}>
<h1>{props.faq.question}</h1>
</div>
<div className={selected === props.index ? `${classes.content} ${classes.show}` : classes.content}>
<p>{props.faq.answer}</p>
</div>
</div>
);
}
export default Accordion;
CodePudding user response:
As mentioned in the docs
border-box
...
The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear.
...
What you could do, is to add the padding in the p
inside the .content
.