Search code examples
javascripthtmlcsscollapsablemaphilight

How to get working both collapsible button element and image area highlight on mouseover

I would like to have both collapsible button element and image area highlight on mouseover element on my webpage. I can get both working separately but not together. The script below does not work; somehow the collapsible button element kills the image area highlight on mouseover element. Any suggestions for modifications to get both elements working?

Script below is what I have tried:

 $(function() {
        $('.map').maphilight();
    });

    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";
        }
      });
    }
.collapsible {
    }
    
    .active, .collapsible:hover {
        background-color: #ccc;
    }
    
    .content {
        display: none;
    }
<!DOCTYPE html> 
<html>
<head>
</head>
<body>
  <button type="button" class="collapsible">
    <h1 id="Header">Collapsible header button</h1>
  </button>
  <div class="content">
    <p>Map highlight test - Hover over the first 'o'-letter</p>
    <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="map" usemap="#simple">
          <map name="simple">
              <area href="#" shape="rect" coords="70,25,115,70" alt="Link" title="Test">
          </map>
      </div>

  <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.4.2/jquery.maphilight.min.js"></script>
</body>
</html>

Solution

  • I found answer to my question by myself😀

    Call to Maphilight() needs to be wrapped inside the function for the collapsible element.

    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";
    }
    $('.map').maphilight();
  });
}