CSS Accordion for WordPress

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.

https://jsfiddle.net/jahangeerm/hbbxgutx/8/

Read More
    .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.

Related posts

1 comment

  1. Just let the height for this class auto, not 470px.
    I think this will help you.

    .accordion_mj input:checked ~ .article.ac-medium {
            height: auto;
        }
    

Comments are closed.