Amateur coder here. I am trying to make a responsive accordion for wordpress. I managed to get so far but I have no clue on how make the height of the accordion to auto fit the content.
.accordion_mj {
width: auto;
}
.accordion_mj label {
padding: 20px 20px;
position: relative;
display: block;
height: 30px;
cursor: pointer;
color: #fff;
line-height: 40px;
font-size: 19px;
background: #fff;
}
.accordion_mj label:hover {
background: #fff;
}
.accordion_mj input + label {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion_mj input:checked + label,
.accordion_mj input:checked + label:hover {
background: #fff;
color: #fff;
}
.accordion_mj input {
display: none;
}
.accordion_mj .article {
background: rgb(255, 255, 255);
overflow: hidden;
height: 0px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion_mj .article p {
color: #777;
line-height: 23px;
font-size: 14px;
padding: 0px;
}
.accordion_mj input:checked ~ .article {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.accordion_mj input:checked ~ .article.ac-small {
height: 155px;
}
.accordion_mj input:checked ~ .article.ac-medium {
height: 400px;
}
.accordion_mj input:checked ~ .article.ac-large {
height: 600px;
}
Please help me tweak this to make it fit my content. Thank you.
Just let the height for this class auto, not 470px.
I think this will help you.