How can I change image due to active class?

Question

I have three accordion which is toggle active class, and only show one accordion. I want to change my side image according to open(active) accordion. For example; if 1.accordion active show photo1.jpeg and so on. I can not find a way to achieve this. I guess, There will be logic something like this; if first accordion classList contains active class show photo1.jpeg and so on. Can someone please help me ?

 var acc = document.getElementsByClassName("accordion"); for (var i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { let active = document.querySelectorAll(".accordion.active"); for (let j = 0; j < active.length; j++) { active[j].classList.remove("active"); active[j].nextElementSibling.style.maxHeight = null; } this.classList.toggle("active"); panel.style.maxHeight = panel.scrollHeight + "px"; } }); }

 .container { display: flex; } .img-container { height: 250px; width: auto; } .img-container img { height: 250px; width: auto; } .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }

 <div class="container"> <div class="img-container"> <img src="https://picsum.photos/200/300" alt="image"> </div> <div class="accordion-container"> <button class="accordion">Section 1</button> <div class="panel"> <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> <button class="accordion">Section 2</button> <div class="panel"> <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> <button class="accordion">Section 3</button> <div class="panel"> <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>

Answer 1

Using your code, here is one way to apply a different image per active tab.

I added id="image" to your image tag and I'm changing its source using the active index.

I'm using example images to show the functionality. - Comments are within code.

 var acc = document.getElementsByClassName("accordion"); //declare image as var for image tag var image = document.getElementById("image"); for (var i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { let active = document.querySelectorAll(".accordion.active"); for (let j = 0; j < active.length; j++) { active[j].classList.remove("active"); active[j].nextElementSibling.style.maxHeight = null; //change image source based on active index if (j === 0) { image.src = "https://cdn.pixabay.com/photo/2020/11/04/19/22/windmill-5713337__340.jpg" } if (j === 1) { image.src = "https://cdn.pixabay.com/photo/2020/11/04/15/29/coffee-beans-5712780__340.jpg" } } this.classList.toggle("active"); panel.style.maxHeight = panel.scrollHeight + "px"; } }); }

 .container { display: flex; } .img-container { height: 250px; width: auto; } .img-container img { height: 250px; width: auto; } .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }

 <div class="container"> <div class="img-container"> <img id="image" src="https://picsum.photos/200/300" alt="image"> </div> <div class="accordion-container"> <button class="accordion">Section 1</button> <div class="panel"> <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> <button class="accordion">Section 2</button> <div class="panel"> <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> <button class="accordion">Section 3</button> <div class="panel"> <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>