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

Is nesting possible with the &:extend function in LessCss?

Best practices for handling multiple tables in AngularJS HTML

Vertical and floating alignment

Unable to locate the CSS file

Dealing with transformed data in AngularJS: Best practices

A guide to successfully interacting with multiple elements simultaneously at a single spot

Utilizing the Pub/Sub architecture to integrate the kafka-node library within Node Js

Looking for a way to extract a dynamic URL from a website's div element?

Having trouble with redundant code while updating state in ReactJS - React JS

Fixing perspective clipping in Three.js

What is the method to obtain an object as the return value from a click function in JavaScript?

How about having a surprise image pop up when you click a button?

Guide on showing string array values in an alert popup using JavaScript

Fade in text effect using jQuery on a Mac computer

Compiling with GatsbyJs throws an abrupt token error with 'if' being an unexpected token

Identify a specific HTML template using jQuery

Creating a functionality in jQuery that allows users to dynamically add a new row by clicking a button

Is there a reason we are able to simultaneously assign the disabled and selected attributes to <option> elements?

What is the reason for Nightwatch running each .js file as a Child process? Could it be due to alterations in the configuration settings

The search results fail to show the required information