The act of selecting a parent element appears to trigger the selection of its child elements as well

Question

The act of selecting a parent element appears to trigger the selection of its child elements as well

I am attempting to create an accordion using Vanilla JavaScript, but I have encountered an issue. When there is a child div element inside the header of the accordion, it does not seem to work and I'm unsure why. However, if there is no child div element, the accordion functions properly.

    var coll = document.getElementsByClassName("m40__grid__item");
coll[i].addEventListener("click", function (evnt) {
    let target = evnt.target;
    if ( !target.matches('.m40__grid__item') ) {
        target = target.closest('.m40__grid__item');
    }
    const currClassList = target.classList;
    if (currClassList.contains("active")) {
      evnt.target.classList.remove("active");
      var content = evnt.target.nextElementSibling;
      content.style.maxHeight = null;
    } else {
      for (var j = 0; j < coll.length; j++) {
        coll[j].classList.remove("active");
        coll[j].nextElementSibling.style.maxHeight = null;
      }
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.maxHeight) {
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      }
    }
  });
}

<div class="m40__grid">
  <div class="m40__grid__item">
    <div class="test">
      This header doesn't work
    </div>
  </div>
  <div class="m40__grid__item--full-width">
    <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 class="m40__grid__item">Click me!</div>
  <div class="m40__grid__item--full-width">
    <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>

The code pen showcasing my issue can be found here: https://codepen.io/mrsalami/pen/WNrBboR?editors=1111

javascript html css

Answer 1

Answer №1

It is my understanding that event.target could potentially be div.test, therefore it is necessary to standardize the target as shown below:

var newTarget = event.target;
if (!newTarget.matches('.m40__grid__item')) {
 newTarget = newTarget.closest('.m40__grid__item');
}

Once this process is complete, you should proceed with using newTarget.

Answer 2

It is my understanding that event.target could potentially be div.test, therefore it is necessary to standardize the target as shown below:

var newTarget = event.target;
if (!newTarget.matches('.m40__grid__item')) {
 newTarget = newTarget.closest('.m40__grid__item');
}

Once this process is complete, you should proceed with using newTarget.

Answer 3

Answer №2

After some tweaking, I believe this solution will be effective. The key change made was removing the line "coll[j].nextElementSibling.style.maxHeight = null;" from within the loop.

var coll = document.getElementsByClassName("m40__grid__item");
for (var i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function (evnt) {
    const currClassList = evnt.target.classList;
    if (currClassList.contains("active")) {
      evnt.target.classList.remove("active");
      var content = evnt.target.nextElementSibling;
      content.style.maxHeight = null;
    } else {
      for (var j = 0; j < coll.length; j++) {
        coll[j].classList.remove("active");
      }
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.maxHeight) {
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      }
    }
  });
}

Answer 4

After some tweaking, I believe this solution will be effective. The key change made was removing the line "coll[j].nextElementSibling.style.maxHeight = null;" from within the loop.

var coll = document.getElementsByClassName("m40__grid__item");
for (var i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function (evnt) {
    const currClassList = evnt.target.classList;
    if (currClassList.contains("active")) {
      evnt.target.classList.remove("active");
      var content = evnt.target.nextElementSibling;
      content.style.maxHeight = null;
    } else {
      for (var j = 0; j < coll.length; j++) {
        coll[j].classList.remove("active");
      }
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.maxHeight) {
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      }
    }
  });
}

Answer 5

Answer №3

Choice 1

If you're looking for a quick solution, simply apply this CSS:

.test {
    pointer-events: none;
}

This will render the element unresponsive to mouse clicks.

Choice 2

If you prefer a more effective fix, here's where you might be going wrong: evnt.target provides the actual target of the click event, which is the innermost element being hovered by the mouse when clicked. Hence, this approach may not always accurately identify the element to which you should add/remove the class active.

@AngelSalazar has proposed an excellent workaround for this issue, so I'll go ahead and share his solution:

coll[i].addEventListener("click", function (evnt) {
    let target = evnt.target;
    if (!target.matches('.m40__grid__item')) {
        target = target.closest('.m40__grid__item');
    }
    const currClassList = target.classList;
    ...

This method traverses through the element's parents in reverse order to find a match for the selector, ensuring that you interact with the header rather than one of its children.

Here's the functioning solution, inspired by the provided codepen example.

var coll = document.getElementsByClassName("m40__grid__item");
for (var i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function (evnt) {
    
    let target = evnt.target;
    if (!target.matches('.m40__grid__item')) {
        target = target.closest('.m40__grid__item');
    }
    const currClassList = target.classList;
    if (currClassList.contains("active")) {
      target.classList.remove("active");
      var content = target.nextElementSibling;
      content.style.maxHeight = null;
    } else {
      for (var j = 0; j < coll.length; j++) {
        coll[j].classList.remove("active");
        coll[j].nextElementSibling.style.maxHeight = null;
      }
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.maxHeight) {
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      }
    }
  });
}

.m40__grid__item {
  background-color: #777;
  color: white;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .m40__grid__item:hover {
  background-color: #555;
}

.m40__grid__item:after {
    font-family: 'FontAwesome'; /* essential to enable caret symbol*/
    content: "\f067";
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
      margin-right: 30px;
}

.active:after {
 content: "\f068";
}

.m40__grid__item--full-width {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

<div class="m40__grid">
<div class="m40__grid__item">
  <div class="test">
    This header doesn't work
  </div>
</div>
<div class="m40__grid__item--full-width">
  <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 class="m40__grid__item">Click me!</div>
<div class="m40__grid__item--full-width">
  <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>

Answer 6

Choice 1

If you're looking for a quick solution, simply apply this CSS:

.test {
    pointer-events: none;
}

This will render the element unresponsive to mouse clicks.

Choice 2

If you prefer a more effective fix, here's where you might be going wrong: evnt.target provides the actual target of the click event, which is the innermost element being hovered by the mouse when clicked. Hence, this approach may not always accurately identify the element to which you should add/remove the class active.

@AngelSalazar has proposed an excellent workaround for this issue, so I'll go ahead and share his solution:

coll[i].addEventListener("click", function (evnt) {
    let target = evnt.target;
    if (!target.matches('.m40__grid__item')) {
        target = target.closest('.m40__grid__item');
    }
    const currClassList = target.classList;
    ...

This method traverses through the element's parents in reverse order to find a match for the selector, ensuring that you interact with the header rather than one of its children.

Here's the functioning solution, inspired by the provided codepen example.

var coll = document.getElementsByClassName("m40__grid__item");
for (var i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function (evnt) {
    
    let target = evnt.target;
    if (!target.matches('.m40__grid__item')) {
        target = target.closest('.m40__grid__item');
    }
    const currClassList = target.classList;
    if (currClassList.contains("active")) {
      target.classList.remove("active");
      var content = target.nextElementSibling;
      content.style.maxHeight = null;
    } else {
      for (var j = 0; j < coll.length; j++) {
        coll[j].classList.remove("active");
        coll[j].nextElementSibling.style.maxHeight = null;
      }
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.maxHeight) {
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      }
    }
  });
}

.m40__grid__item {
  background-color: #777;
  color: white;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .m40__grid__item:hover {
  background-color: #555;
}

.m40__grid__item:after {
    font-family: 'FontAwesome'; /* essential to enable caret symbol*/
    content: "\f067";
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
      margin-right: 30px;
}

.active:after {
 content: "\f068";
}

.m40__grid__item--full-width {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

<div class="m40__grid">
<div class="m40__grid__item">
  <div class="test">
    This header doesn't work
  </div>
</div>
<div class="m40__grid__item--full-width">
  <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 class="m40__grid__item">Click me!</div>
<div class="m40__grid__item--full-width">
  <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>

The act of selecting a parent element appears to trigger the selection of its child elements as well

Answer №1

Answer №2

Answer №3

Choice 1

Choice 2

Similar questions

Text appears unclear and fuzzy when using Firefox browser

Just encountered an issue stating "PrismaClient cannot run in the browser" while working with [Next.js]

What could be causing the issue of node-sass generated CSS files not loading on the initial GET request?

Positioning Tumblr blockquotes beneath each other, rather than within

Tips for recalling the display and concealment of a div element using cookies

Incapable of retrieving data from MongoDB due to a failure in fetching results using streams in Highland.js

Can you explain how the Facebook Like button code functions and how I can create a similar feature on my own platform?

Learn how to retrieve data prior to rendering with Vue 3 and the composition api

Hovering over the Star Rating component will cause all previous stars to be filled

Challenges with uploading files using jQuery

Create type definitions for React components in JavaScript that utilize the `prop-types` library

Modifying a Json file in a Node application, while retaining the previously stored data

"Oops, it seems like there are an excessive number of connections in Express MySQL causing

Can you explain how to extract information from an API response using res.send?

How to disable annoying browser ad extensions using Javascript

Uploading files on a web page using AJAX technology

Tips for transferring a file to PocketBase using NodeJs

Prevent form submission once all tasks have been finalized

Exploring the context of file upload events and analyzing javascript functionality

Is there a way to easily toggle a Material Checkbox in Angular with just one click?