How do I change a specific image when a list class is active

Question

I have website which is made with materialize. I am using a ul with three li elements which are all collapsible. On top of that is a card with an image. I want to change the image when a li element is active, respectively, expanded.

There were some similar question on here already, but none really fit my problem.
Following is an example layout of my code.

<div class="card">
 <div class="card-image">
  <img src="img/image-1.jpg"/>
 </div>
 <ul class="collapsible expandable">
  <li class="active">
   <div class="collapsible-header">
   <div class="collabsible-body">
  </li>
 </ul>
</div>

The active class appears when you expand the respective li element. It disappears again if you close it.
image-1.jpg should change, corresponding to the li element when the respective li element is active.
Any help is greatly appreciated!

Answer 1

If you are the one toggling the class between active and collapsed , you could add additional code to your toggle function which can swap out the src of that image.

If not, you can use a Mutation Observer to fire a callback when the class of that DOM element has changed. You'll still have to update the src in response to the class change.

// will watch target element for changes to the 'class'
// attribute and fire the callback with an array of the
// class names when changed
const observeClassList = (element, callback) => {
  const config = { attributes: true }
  const mutationCallback = mutationsList => {
    mutationsList.forEach(mutation => {
      if (mutation.attributeName === `class`)
        callback([...mutation.target.classList])
    })
  }
  const observer = new MutationObserver(mutationCallback)
  observer.observe(element, config)
}

// example implementation
// it's up to you to watch for any class changes you desire on any element,
// and make changes to any other element (ie updating and image src) when desired
const changeImageOnToggle = (imageElement, toggleElement) => {
  const callback = classArray => {
    if (classArray.includes(`active-li`)) {
      // update the image element src
    }
  }
  observeClassList(toggleElement, callback)
}

Answer 2

Is this what you want?

 $('.active-li').click(function(){ $(this).toggleClass("active"); var new_src = $(this).attr('data-img'); $(".card-image img").attr("src",new_src); $(".card-image p").text('src of this img is '+new_src); });

 .active{ color:red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card"> <div class="card-image"> <img src="img/image-1.jpg"/> <p > </p> </div> <ul class="collapsible expandable"> <li data-img="img/image-2.jpg" class="active-li"> Lorem </li> <li data-img="img/image-1.jpg" class="active-li"> Lorem </li> </ul> </div>

Answer 3

I used Midos logic and it worked fine... but how do I return the image back to its original image?

    $('.egg').click(function(){
  $(this).toggleClass("active");
  var new_src = $(this).attr('data-img');
  $(".green-egg img").attr("src",new_src);
  return;
});