Добавить переход к onClick div

Question

Я пытаюсь сгладить переход. при нажатии на раздел он расширяется для отображения текста внизу. Я хотел бы добавить переход к этому, чтобы сделать его медленнее и плавнее.

Я попытался сделать это, добавив переход к «активному» классу, но это не хорошо.

К вашему сведению - Все еще учусь JS и продвинутый CSS, поэтому мои знания ограничены!

Заранее спасибо!

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
      
    }
  });
}

.third-last {
    width:28%;
    float: left;
}

.third {
    width: 28%;
    float: left;
    margin-right: 85px;
}

.team-member {
    width: 100%;
    margin-bottom: 50px;
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    -moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    border-radius: 20px;
    transition:3s;
    -webkit-transition:3s;
}

.content {
        display: none;
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 30px;
      }
.team-role {
    padding-left: 30px;
    padding-top: 40px;
    padding-bottom: 20px;
}

<div class="container">
    <div class="third">
        <div class="team-member">
            <div class="collapsible">
                <img src="http://localhost/testsite/wordpress/wp-content/uploads/2020/01/.jpg">
                <div class="team-role">
                    <h3>text</h3>
                    <p>text</p>
                </div>
            </div>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                    et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip
                    ex ea commodo consequat.</p>
            </div>
        </div>
        <div class="team-member">
            <div class="collapsible">
                <img src="http://text.jpg">
                <div class="text">
                    <h3>text</h3>
                    <p>Managing Director</p>
                </div>
            </div>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                    et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip
                    ex ea commodo consequat.</p>
            </div>
        </div>
    </div>
    <div class="third">
        <div class="team-member">
            <div class="collapsible">
                <img src="http://localhost/testsite/wordpress/wp-content/uploads/2020/01/Charlie-Conway-Product-Designer-Simple-Design-Works.jpg">
                <div class="team-role">
                    <h3>text</h3>
                    <p>text</p>
                </div>
            </div>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                    et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip
                    ex ea commodo consequat.</p>
            </div>
        </div>
        <div class="team-member">
            <div class="collapsible">
                <img src="http://localhost/testsite/wordpress/wp-content/uploads/2020/01/Charlie-Conway-Product-Designer-Simple-Design-Works.jpg">
                <div class="team-role">
                    <h3>text</h3>
                    <p>text</p>
                </div>
            </div>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                    et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip
                    ex ea commodo consequat.</p>
            </div>
        </div>
    </div>
    <div class="third-last">
        <div class="team-member">
            <div class="collapsible">
                <img src="http://localhost/testsite/wordpress/wp-content/uploads/2020/01/Charlie-Conway-Product-Designer-Simple-Design-Works.jpg">
                <div class="team-role">
                    <h3>text</h3>
                    <p>Managing Director</p>
                </div>
            </div>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                    et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip
                    ex ea commodo consequat.</p>
            </div>
        </div>
        <div class="team-member">
            <div class="collapsible">
                <img src="http:///testsite/wordpress/wp-content/uploads/2020/01/.jpg">
                <div class="team-role">
                    <h3>text</h3>
                    <p>Managing Director</p>
                </div>
            </div>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                    et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip
                    ex ea commodo consequat.</p>
            </div>
        </div>
    </div>

    
</div>

Answer 1

Вы не можете перейти display:none; на display:block;. Это то, что я изменил в вашем JS, чтобы он работал:

let teams = document.querySelectorAll(".team-member");
//note forEach is equal to your for(i ...) and the (team) is your "this" variable 
teams.forEach((team) => {
    let col = team.firstElementChild;
    let content = team.lastElementChild;

    let colH = col.clientHeight;
    let contentH = content.clientHeight;    
    team.style.height = `${colH}px`

    team.addEventListener("click", () => {

        if (team.style.height == `${colH}px`) {
      team.style.height = `${colH + contentH}px`
    } else {
      team.style.height = `${colH}px`
    }
    });
});

, а также добавил overflow:hidden; к вашему члену команды Класс Я рекомендую вам научиться использовать функции forEach, они намного лучше, чем for(i ...)

Answer 2

дисплей: нет / блок не работает с переходами. Вы должны добавить свойство стиля непрозрачностью по умолчанию: 1; Переход:. 5s облегчить непрозрачность; в ваш складной класс.

.collapsible {
    opacity: 1;
    transition: ease 0.5s opacity;
}
.is-fadeout {
    opacity: 0; 
}

Добавьте этот класс .is-fadeout по клику, а после тайм-аута в 0,5 с добавьте свойство, отображающее none