<section class="section platforms" id="platforms">
    <div class="container">
        <div class="platforms__wrapper">
            <div class="platforms__header">
                <h2 class="platforms__title text-68">Platforms</h2>
                <h3 class="platforms__subtitle text-26">On which we publish your business material</h3>
            </div>
            <div class="platforms__block">
                <div class="platform__changer">
                    <ul class="changer__elements">
                        <li class="changer__platform" id="google">
                            <h5 class="platform__name text-16">Google drive</h5>
                        </li>
                        <li class="changer__platform" id="sharepoint">
                            <h5 class="platform__name text-16">SharePoint</h5>
                        </li>
                        <li class="changer__platform platform_choosed" id="notion">
                            <h5 class="platform__name text-16">notion.so</h5>
                        </li>
                        <li class="changer__platform" id="academyocean">
                            <h5 class="platform__name text-16">AcademyOcean</h5>
                        </li>
                        <li class="changer__platform platform_new" id="equeo">
                            <h5 class="platform__name text-16">e-queo</h5>
                        </li>
                        <li class="changer__platform" id="getcourse">
                            <h5 class="platform__name text-16">getcourse</h5>
                        </li>
                        <li class="changer__platform" id="teachbase">
                            <h5 class="platform__name text-16">teachbase</h5>
                        </li>
                    </ul>
                    <div class="changer__line"></div>
                </div>
                <div class="platform__description platform_google" id="google_desc">
                    <p class="description__text text-16">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mi amet id viverra tortor. Id eu id nisi, ridiculus feugiat a. Eu mi, nunc, mauris leo arcu libero nec neque. Vitae natoque a lectus in ornare lacus iaculis elit. Lectus venenatis proin lacus eget auctor turpis enim enim a. Augue aenean rhoncus dictum turpis in commodo risus sapien. Diam quam tellus eu senectus tellus diam, diam aliquet convallis. Enim ullamcorper nibh ac ullamcorper in sed quam.</p>
                    <a href="" class="link description__link text-16">Learn more about Google Drive --></a>
                </div>
                <div class="platform__description platform_sharepoint" id="sharepoint_desc">
                    <p class="description__text text-16">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mi amet id viverra tortor. Id eu id nisi, ridiculus feugiat a. Eu mi, nunc, mauris leo arcu libero nec neque. Vitae natoque a lectus in ornare lacus iaculis elit. Lectus venenatis proin lacus eget auctor turpis enim enim a. Augue aenean rhoncus dictum turpis in commodo risus sapien. Diam quam tellus eu senectus tellus diam, diam aliquet convallis. Enim ullamcorper nibh ac ullamcorper in sed quam.</p>
                    <a href="" class="link description__link text-16">Learn more about sharepoint --></a>
                </div>
                <div class="platform__description platform_notion platform__description_active" id="notion_desc">
                    <p class="description__text text-16">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mi amet id viverra tortor. Id eu id nisi, ridiculus feugiat a. Eu mi, nunc, mauris leo arcu libero nec neque. Vitae natoque a lectus in ornare lacus iaculis elit. Lectus venenatis proin lacus eget auctor turpis enim enim a. Augue aenean rhoncus dictum turpis in commodo risus sapien. Diam quam tellus eu senectus tellus diam, diam aliquet convallis. Enim ullamcorper nibh ac ullamcorper in sed quam.</p>
                    <a href="" class="link description__link text-16">Learn more about notion.so --></a>
                </div>
                <div class="platform__description platform_academyocean" id="academyocean_desc">
                    <p class="description__text text-16">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mi amet id viverra tortor. Id eu id nisi, ridiculus feugiat a. Eu mi, nunc, mauris leo arcu libero nec neque. Vitae natoque a lectus in ornare lacus iaculis elit. Lectus venenatis proin lacus eget auctor turpis enim enim a. Augue aenean rhoncus dictum turpis in commodo risus sapien. Diam quam tellus eu senectus tellus diam, diam aliquet convallis. Enim ullamcorper nibh ac ullamcorper in sed quam.</p>
                    <a href="" class="link description__link text-16">Learn more about academyocean --></a>
                </div>
                <div class="platform__description platform_e-queo" id="equeo_desc">
                    <p class="description__text text-16">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mi amet id viverra tortor. Id eu id nisi, ridiculus feugiat a. Eu mi, nunc, mauris leo arcu libero nec neque. Vitae natoque a lectus in ornare lacus iaculis elit. Lectus venenatis proin lacus eget auctor turpis enim enim a. Augue aenean rhoncus dictum turpis in commodo risus sapien. Diam quam tellus eu senectus tellus diam, diam aliquet convallis. Enim ullamcorper nibh ac ullamcorper in sed quam.</p>
                    <a href="" class="link description__link text-16">Learn more about e-queo --></a>
                </div>
                <div class="platform__description platform_getcourse" id="getcourse_desc">
                    <p class="description__text text-16">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mi amet id viverra tortor. Id eu id nisi, ridiculus feugiat a. Eu mi, nunc, mauris leo arcu libero nec neque. Vitae natoque a lectus in ornare lacus iaculis elit. Lectus venenatis proin lacus eget auctor turpis enim enim a. Augue aenean rhoncus dictum turpis in commodo risus sapien. Diam quam tellus eu senectus tellus diam, diam aliquet convallis. Enim ullamcorper nibh ac ullamcorper in sed quam.</p>
                    <a href="" class="link description__link text-16">Learn more about Getcourse --></a>
                </div>
                <div class="platform__description platform_teachbase" id="teachbase_desc">
                    <p class="description__text text-16">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mi amet id viverra tortor. Id eu id nisi, ridiculus feugiat a. Eu mi, nunc, mauris leo arcu libero nec neque. Vitae natoque a lectus in ornare lacus iaculis elit. Lectus venenatis proin lacus eget auctor turpis enim enim a. Augue aenean rhoncus dictum turpis in commodo risus sapien. Diam quam tellus eu senectus tellus diam, diam aliquet convallis. Enim ullamcorper nibh ac ullamcorper in sed quam.</p>
                    <a href="" class="link description__link text-16">Learn more about TeachBase --></a>
                </div>
            </div>
        </div>
    </div>
</section>

.platforms {
    padding: 160px 0;
}

.platforms__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 80px 0;
    background: $grey-5;
}

.platforms__header {
    max-width: 360px;
}

.platforms__block {
    max-width: 760px;
    margin-top: 40px;
}

.platform__changer {
    width: 760px;
}
.platform__choosed {
    background-color: #F90;
}
.changer__elements {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

.changer__platform {
    position: relative;
    cursor: pointer;
}

.changer__line {
    margin-top: 20px;
    width: 100%;
    height: 2px;
    background: $grey-20;
}

.platform__description {
    margin: auto;
    margin-top: 40px;
    max-width: 560px;
    display: none;
}

.platform__description_active {
    display: block;
}

.description__link {
    display: block;
    margin-top: 10px;
}

const names = 'google,sharepoint,notion,academyocean,equeo,getcourse,teachbase'.split(',');
const btns = names.map(name => document.getElementById(name));
const desc = names.map(name => document.getElementById(name + '_desc'));
const classNameBtn = 'platform__choosed';
const classNameDesc = 'platform__description_active';

const changeTo = index => {
  btns.forEach(el => el.classList.remove(classNameBtn));
  btns[index].classList.add(classNameBtn);
  desc.forEach(el => el.classList.remove(classNameDesc));
  desc[index].classList.add(classNameDesc);
};

btns.forEach((el, i) => el.addEventListener('click', () => changeTo(i)));

changeTo(0);