Как сделать заменяющиеся картинку в выпадающем блоке?

Question

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

        let coll = document.getElementsByClassName('collapsible');
        for(let i = 0; i < coll.length; i++) {
            coll[i].addEventListener('click',function() {
                this.classList.toggle('active');
                let content = this.nextElementSibling;
                if (content.style.maxHeight) {
                    content.style.maxHeight = null
                } else {
                    content.style.maxHeight = content.scrollHeight + 'px'
                }
            })
        }

.portfolio {
    height: 100vh;
    margin-top: 50px;
    &-textm {
        margin: 0;
        text-align: center;
        font-size: 72px;
        margin-bottom: 50px;
    }
    &-item {
        width: 1110px;
        height: 250px;
        box-shadow: 0px 0px 25px 0px rgba($color: #000000, $alpha: .2);
        border-radius: 25px;
        margin: 15px;
        margin-left: 0px;
    }
    &-img {
        border-radius: 25px;
        float: left;
        margin: 25px;
        box-shadow: 0px 0px 25px 0px rgba($color: #000000, $alpha: .2);
    }
    &-text {
        margin: 0;
        padding: 25px 0px 20px;
        font-size: 24px;
    }
    &-description {
        margin: 0;
        margin-right: 25px;
        font-size: 17px;
    }
    &-btn {
        float: left;
        margin-top: 20px;
        padding-top: 5px;
        padding-bottom: 6px;
        padding-left: 17px;
        padding-right: 14px;
        background-image: url('/img/btn2.png');
        background-repeat: no-repeat;
        font-size: 16px;
        color: rgb(255, 255, 255);
        :hover {
            transition: 0.5s;
            color: #f3f3f3;
            text-shadow: 0px 0px 25px rgb(0, 0, 0);
        }
    }
}

.collapsible {
    display: block;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    background-color: transparent;
    border: none;
    outline: none;
}

.active,
.collapsible:hover {
    overflow: hidden;
}

.content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

     <div class="portfolio">
        <a name="portfolio"></a>
         <div class="wrapper">
             <h2 class="portfolio-textm">Портфолио</h2>
             <div class="portfolio-items">
                 <div class="portfolio-item">
                     <img src="/img/Porsche 912.png" alt="" class="portfolio-img">
                     <h3 class="portfolio-text">Landing page для Porsche</h3>
                     <p class="portfolio-description">Porsche 911 - спортивный автомобиль производства немецкой компании Porsche AG в кузове двухдверное купе или кабриолет.<br>Сайт был разработан в качестве примера для портфолио и не является официальным сайтом Porsche.</p>
                     <a class="portfolio-btn" href=""><span>Подробнее</span></a>
                 </div>
                 <div class="portfolio-item">
                    <img src="/img/Car repair.png" alt="" class="portfolio-img">
                    <h3 class="portfolio-text">Landing page для Autosimple</h3>
                    <p class="portfolio-description">Autosimple - это небольшая станция технического обслуживания (СТО) в городе Златоуст, Челябинской области. Она занимается обслуживанием автомобилей и предлагает различный спектр услуг.</p>
                    <a class="portfolio-btn" href=""><span>Подробнее</span></a>
                </div>
                <div class="portfolio-item">
                    <img src="/img/Detail.png" alt="" class="portfolio-img">
                    <h3 class="portfolio-text">Landing page для детейлинг центра</h3>
                    <p class="portfolio-description">Детейлинг центр - это комплекс услуг, который включает в себя работы по тщательному профессиональному уходу за интерьером и экстерьером автомобиля.<br>Данный сайт не принадлежит никакой компании.</p>
                    <a class="portfolio-btn" href=""><span>Подробнее</span></a>
                </div>
                <button class="collapsible"><img src="http://svgur.com/i/d7Y.svg" alt=""></button>
                <button class="collapsible"><img src="http://svgur.com/i/d7F.svg" alt=""></button>
                <div class="content">
                    <div class="portfolio-item">
                        <img src="/img/Detail.png" alt="" class="portfolio-img">
                        <h3 class="portfolio-text">Landing page для детейлинг центра</h3>
                        <p class="portfolio-description">Детейлинг центр - это комплекс услуг, который включает в себя работы по тщательному профессиональному уходу за интерьером и экстерьером автомобиля.<br>Данный сайт не принадлежит никакой компании.</p>
                        <a class="portfolio-btn" href=""><span>Подробнее</span></a>
                    </div>
                </div>
             </div>
         </div>
     </div>

Answer 1

Необязательно менять картинки, можно просто изменять класс элементу <button class="collapsible"><img src="http://svgur.com/i/d7Y.svg" alt=""></button> при клике

css

.collapsible {
 /* по желанию (для плавности изменений) */
 transition: transform .5s;
}
/* Этот класс будем добавлять */
.rotate-x {
  transform: rotateX(180deg);
}

html

Тут я только удалил элемент <button class="collapsible"><img src="http://svgur.com/i/d7F.svg" alt=""></button>

js

let coll = document.querySelector('.collapsible');

coll.addEventListener('click', function () {
  // Добавляем класс, который разворачивает кнопку
  this.classList.toggle('rotate-x');
  this.classList.toggle('active');

  let content = this.nextElementSibling;

  if (content.style.maxHeight) {
    content.style.maxHeight = null
  } else {
    content.style.maxHeight = content.scrollHeight + 'px'
  }
});

БЛОГ НА HUSL

Как сделать заменяющиеся картинку в выпадающем блоке?

Ответы (1 шт):