CSS-ToggleClass to collapse

ToggleClass to collapse like accordin. It must be fixed in max-height;

by JSDavi

HTML

<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<div class="judge-score-table">
    <div class="judge-score-header">A-a</div>
    <div class="judge-fighters">AAAAAAAAAAAAAAAAAAAAAAA</div>
</div>
<div class="judge-score-table select">
    <div class="judge-score-header">B-b</div>
    <div class="judge-fighters">bBBBBBBBBBBBBBBBBBBBBBBBB</div>
</div>
<div class="judge-score-table">
    <div class="judge-score-header">C-c</div>
    <div class="judge-fighters">CCCCCCCCCCCCCCCCCCCCCCCCC</div>
</div>

CSS

.judge-score-header {
	line-height: 40px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: blue;
}
.judge-score-table {
    display: block;
    background-color: yellow;
}
.judge-score-table.select {
    background-color: grey;
}
.judge-score-table .judge-score-header {
    background-color: green;
}
.judge-score-table .judge-fighters {
    overflow-y: hidden;
    opacity: 0;
    max-height: 0;
    transition: max-height 0.56s cubic-bezier(1, 0, 0, 1), opacity 0.56s cubic-bezier(1, 0, 0, 1);
    -webkit-transition: max-height 0.56s cubic-bezier(1, 0, 0, 1), opacity 0.56s cubic-bezier(1, 0, 0, 1);
    /* Safari and Chrome */
}
.judge-score-table.select .judge-fighters {
    opacity: 1;
    max-height: 28px;
	padding: 20px 0;
    transition: max-height 0.56s cubic-bezier(1, 0, 0, 1), opacity 0.56s cubic-bezier(1, 0, 0, 1);
    -webkit-transition: max-height 0.56s cubic-bezier(1, 0, 0, 1), opacity 0.56s cubic-bezier(1, 0, 0, 1);
    /* Safari and Chrome */
}

JavaScript

function judgeScoreSelected(event) {
    var ele = $(event.target).parents('.judge-score-table');
    if (!ele.hasClass('select')) {
        ele.toggleClass('select');
        ele.siblings('.select')
            .toggleClass('select');
    }
}
$(document).ready(function () {
    // Judge-Score
    $('.judge-score-table').bind('click', judgeScoreSelected);
});