Click event on div with img and text not firing when clicking img











up vote
0
down vote

favorite












I wrote toggle script in ES6/vanilla JS. The intended functionality is super simple, you click on the toggle div and it adds an active class to another div that matches the toggle div's data-toggle property. In my toggle div, I need there to be both text and an image. It works great when you click on the text within the div, but when you click on the image within the div, the toggle is not firing. Is there something specific I need to do to include all of the children within the div?



For some reason, I can't even get this working via this code snippet editor, but it is working in my project.






const setActive = (toggles, panels, id) => {

  let activePanel = panels.filter(panel => panel.getAttribute('data-toggle') == id)

  let activeToggle = toggles.filter(toggle => toggle.getAttribute('data-toggle') == id)

  activePanel.forEach(panel => panel.classList.add('active'))

  activeToggle.forEach(toggle => toggle.classList.add('active'))

}



const removeActive = (nodes) => {

  nodes.forEach(node => node.classList.remove('active'))

}



const handler = (event) => {

  event.preventDefault()

  let id = event.target.getAttribute('data-toggle')

  let panels = Array(...document.querySelectorAll('.js-toggle-panel'))

  let toggles = Array(...document.querySelectorAll('.js-toggle'))

  removeActive(panels)

  removeActive(toggles)

  setActive(toggles, panels, id)

}



let toggles = Array(...document.querySelectorAll('.js-toggle'))

toggles.forEach(toggle => toggle.addEventListener('click', handler))

.toggle-panel {

  display: none;

}



.toggle-panel .active {

  display: block;

}

<div class="js-toggle toggle" data-toggle="toggle-1">

  <img src="https://via.placeholder.com/50"> First toggle

</div>



<div class="js-toggle toggle" data-toggle="toggle-2">

  Second toggle

</div>



<div class="js-toggle-panel toggle-panel" data-toggle="toggle-1">

  <h1>Toggle 1</h1>

</div>



<div class="js-toggle-panel toggle-panel" data-toggle="toggle-2">

  <h1>Second toggle!</h1>

</div>








javascript html ecmascript-6 toggle







share|improve this question




























    up vote
    0
    down vote

    favorite












    I wrote toggle script in ES6/vanilla JS. The intended functionality is super simple, you click on the toggle div and it adds an active class to another div that matches the toggle div's data-toggle property. In my toggle div, I need there to be both text and an image. It works great when you click on the text within the div, but when you click on the image within the div, the toggle is not firing. Is there something specific I need to do to include all of the children within the div?



    For some reason, I can't even get this working via this code snippet editor, but it is working in my project.






    const setActive = (toggles, panels, id) => {
    
  let activePanel = panels.filter(panel => panel.getAttribute('data-toggle') == id)
    
  let activeToggle = toggles.filter(toggle => toggle.getAttribute('data-toggle') == id)
    
  activePanel.forEach(panel => panel.classList.add('active'))
    
  activeToggle.forEach(toggle => toggle.classList.add('active'))
    
}
    

    
const removeActive = (nodes) => {
    
  nodes.forEach(node => node.classList.remove('active'))
    
}
    

    
const handler = (event) => {
    
  event.preventDefault()
    
  let id = event.target.getAttribute('data-toggle')
    
  let panels = Array(...document.querySelectorAll('.js-toggle-panel'))
    
  let toggles = Array(...document.querySelectorAll('.js-toggle'))
    
  removeActive(panels)
    
  removeActive(toggles)
    
  setActive(toggles, panels, id)
    
}
    

    
let toggles = Array(...document.querySelectorAll('.js-toggle'))
    
toggles.forEach(toggle => toggle.addEventListener('click', handler))

    .toggle-panel {
    
  display: none;
    
}
    

    
.toggle-panel .active {
    
  display: block;
    
}

    <div class="js-toggle toggle" data-toggle="toggle-1">
    
  <img src="https://via.placeholder.com/50"> First toggle
    
</div>
    

    
<div class="js-toggle toggle" data-toggle="toggle-2">
    
  Second toggle
    
</div>
    

    
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-1">
    
  <h1>Toggle 1</h1>
    
</div>
    

    
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-2">
    
  <h1>Second toggle!</h1>
    
</div>








    javascript html ecmascript-6 toggle







    share|improve this question


























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      I wrote toggle script in ES6/vanilla JS. The intended functionality is super simple, you click on the toggle div and it adds an active class to another div that matches the toggle div's data-toggle property. In my toggle div, I need there to be both text and an image. It works great when you click on the text within the div, but when you click on the image within the div, the toggle is not firing. Is there something specific I need to do to include all of the children within the div?



      For some reason, I can't even get this working via this code snippet editor, but it is working in my project.






      const setActive = (toggles, panels, id) => {
      
  let activePanel = panels.filter(panel => panel.getAttribute('data-toggle') == id)
      
  let activeToggle = toggles.filter(toggle => toggle.getAttribute('data-toggle') == id)
      
  activePanel.forEach(panel => panel.classList.add('active'))
      
  activeToggle.forEach(toggle => toggle.classList.add('active'))
      
}
      

      
const removeActive = (nodes) => {
      
  nodes.forEach(node => node.classList.remove('active'))
      
}
      

      
const handler = (event) => {
      
  event.preventDefault()
      
  let id = event.target.getAttribute('data-toggle')
      
  let panels = Array(...document.querySelectorAll('.js-toggle-panel'))
      
  let toggles = Array(...document.querySelectorAll('.js-toggle'))
      
  removeActive(panels)
      
  removeActive(toggles)
      
  setActive(toggles, panels, id)
      
}
      

      
let toggles = Array(...document.querySelectorAll('.js-toggle'))
      
toggles.forEach(toggle => toggle.addEventListener('click', handler))

      .toggle-panel {
      
  display: none;
      
}
      

      
.toggle-panel .active {
      
  display: block;
      
}

      <div class="js-toggle toggle" data-toggle="toggle-1">
      
  <img src="https://via.placeholder.com/50"> First toggle
      
</div>
      

      
<div class="js-toggle toggle" data-toggle="toggle-2">
      
  Second toggle
      
</div>
      

      
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-1">
      
  <h1>Toggle 1</h1>
      
</div>
      

      
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-2">
      
  <h1>Second toggle!</h1>
      
</div>








      javascript html ecmascript-6 toggle







      share|improve this question















      I wrote toggle script in ES6/vanilla JS. The intended functionality is super simple, you click on the toggle div and it adds an active class to another div that matches the toggle div's data-toggle property. In my toggle div, I need there to be both text and an image. It works great when you click on the text within the div, but when you click on the image within the div, the toggle is not firing. Is there something specific I need to do to include all of the children within the div?



      For some reason, I can't even get this working via this code snippet editor, but it is working in my project.






      const setActive = (toggles, panels, id) => {
      
  let activePanel = panels.filter(panel => panel.getAttribute('data-toggle') == id)
      
  let activeToggle = toggles.filter(toggle => toggle.getAttribute('data-toggle') == id)
      
  activePanel.forEach(panel => panel.classList.add('active'))
      
  activeToggle.forEach(toggle => toggle.classList.add('active'))
      
}
      

      
const removeActive = (nodes) => {
      
  nodes.forEach(node => node.classList.remove('active'))
      
}
      

      
const handler = (event) => {
      
  event.preventDefault()
      
  let id = event.target.getAttribute('data-toggle')
      
  let panels = Array(...document.querySelectorAll('.js-toggle-panel'))
      
  let toggles = Array(...document.querySelectorAll('.js-toggle'))
      
  removeActive(panels)
      
  removeActive(toggles)
      
  setActive(toggles, panels, id)
      
}
      

      
let toggles = Array(...document.querySelectorAll('.js-toggle'))
      
toggles.forEach(toggle => toggle.addEventListener('click', handler))

      .toggle-panel {
      
  display: none;
      
}
      

      
.toggle-panel .active {
      
  display: block;
      
}

      <div class="js-toggle toggle" data-toggle="toggle-1">
      
  <img src="https://via.placeholder.com/50"> First toggle
      
</div>
      

      
<div class="js-toggle toggle" data-toggle="toggle-2">
      
  Second toggle
      
</div>
      

      
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-1">
      
  <h1>Toggle 1</h1>
      
</div>
      

      
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-2">
      
  <h1>Second toggle!</h1>
      
</div>








      const setActive = (toggles, panels, id) => {
      
  let activePanel = panels.filter(panel => panel.getAttribute('data-toggle') == id)
      
  let activeToggle = toggles.filter(toggle => toggle.getAttribute('data-toggle') == id)
      
  activePanel.forEach(panel => panel.classList.add('active'))
      
  activeToggle.forEach(toggle => toggle.classList.add('active'))
      
}
      

      
const removeActive = (nodes) => {
      
  nodes.forEach(node => node.classList.remove('active'))
      
}
      

      
const handler = (event) => {
      
  event.preventDefault()
      
  let id = event.target.getAttribute('data-toggle')
      
  let panels = Array(...document.querySelectorAll('.js-toggle-panel'))
      
  let toggles = Array(...document.querySelectorAll('.js-toggle'))
      
  removeActive(panels)
      
  removeActive(toggles)
      
  setActive(toggles, panels, id)
      
}
      

      
let toggles = Array(...document.querySelectorAll('.js-toggle'))
      
toggles.forEach(toggle => toggle.addEventListener('click', handler))

      .toggle-panel {
      
  display: none;
      
}
      

      
.toggle-panel .active {
      
  display: block;
      
}

      <div class="js-toggle toggle" data-toggle="toggle-1">
      
  <img src="https://via.placeholder.com/50"> First toggle
      
</div>
      

      
<div class="js-toggle toggle" data-toggle="toggle-2">
      
  Second toggle
      
</div>
      

      
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-1">
      
  <h1>Toggle 1</h1>
      
</div>
      

      
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-2">
      
  <h1>Second toggle!</h1>
      
</div>





      const setActive = (toggles, panels, id) => {
      
  let activePanel = panels.filter(panel => panel.getAttribute('data-toggle') == id)
      
  let activeToggle = toggles.filter(toggle => toggle.getAttribute('data-toggle') == id)
      
  activePanel.forEach(panel => panel.classList.add('active'))
      
  activeToggle.forEach(toggle => toggle.classList.add('active'))
      
}
      

      
const removeActive = (nodes) => {
      
  nodes.forEach(node => node.classList.remove('active'))
      
}
      

      
const handler = (event) => {
      
  event.preventDefault()
      
  let id = event.target.getAttribute('data-toggle')
      
  let panels = Array(...document.querySelectorAll('.js-toggle-panel'))
      
  let toggles = Array(...document.querySelectorAll('.js-toggle'))
      
  removeActive(panels)
      
  removeActive(toggles)
      
  setActive(toggles, panels, id)
      
}
      

      
let toggles = Array(...document.querySelectorAll('.js-toggle'))
      
toggles.forEach(toggle => toggle.addEventListener('click', handler))

      .toggle-panel {
      
  display: none;
      
}
      

      
.toggle-panel .active {
      
  display: block;
      
}

      <div class="js-toggle toggle" data-toggle="toggle-1">
      
  <img src="https://via.placeholder.com/50"> First toggle
      
</div>
      

      
<div class="js-toggle toggle" data-toggle="toggle-2">
      
  Second toggle
      
</div>
      

      
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-1">
      
  <h1>Toggle 1</h1>
      
</div>
      

      
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-2">
      
  <h1>Second toggle!</h1>
      
</div>





      javascript html ecmascript-6 toggle




      javascript html ecmascript-6 toggle






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 19 at 21:05









      isherwood

      36.4k1080111




      36.4k1080111










      asked Nov 19 at 20:10









      Liz

      2681725




      2681725
























          2 Answers
          2






          active

          oldest

          votes

















          up vote
          2
          down vote



          accepted










          I changed two things that I believe will resolve your issue:




          1. I changed the selector .toggle-panel .active to .toggle-panel.active-- without that, even in the cases where the JS was working as you intended nothing was actually be made visible.

          2. I moved your code from using event.target to event.currentTarget -- the former always points to the clicked element, whereas the latter refers to the element on which the listener has been placed.


          See the snippet below.






          const setActive = (toggles, panels, id) => {
          
  let activePanel = panels.filter(panel => panel.getAttribute('data-toggle') == id)
          
  let activeToggle = toggles.filter(toggle => toggle.getAttribute('data-toggle') == id)
          
  activePanel.forEach(panel => panel.classList.add('active'))
          
  activeToggle.forEach(toggle => toggle.classList.add('active'))
          
}
          

          
const removeActive = (nodes) => {
          
  nodes.forEach(node => node.classList.remove('active'))
          
}
          

          
const handler = (event) => {
          
  event.preventDefault()
          
  let id = event.currentTarget.getAttribute('data-toggle')
          
  let panels = Array(...document.querySelectorAll('.js-toggle-panel'))
          
  let toggles = Array(...document.querySelectorAll('.js-toggle'))
          
  removeActive(panels)
          
  removeActive(toggles)
          
  setActive(toggles, panels, id)
          
}
          

          
let toggles = Array(...document.querySelectorAll('.js-toggle'))
          
toggles.forEach(toggle => toggle.addEventListener('click', handler))

          .toggle-panel {
          
  display: none;
          
}
          

          
.toggle-panel.active {
          
  display: block;
          
}

          <div class="js-toggle toggle" data-toggle="toggle-1">
          
  <img src="https://via.placeholder.com/50"> First toggle
          
</div>
          

          
<div class="js-toggle toggle" data-toggle="toggle-2">
          
  Second toggle
          
</div>
          

          
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-1">
          
  <h1>Toggle 1</h1>
          
</div>
          

          
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-2">
          
  <h1>Second toggle!</h1>
          
</div>








          share|improve this answer




























            up vote
            2
            down vote













            Instead of event.target you should use event.currentTarget in your handler function to return node to which event listener is attached. event.target is returning <img> node, not <div> with data-toggle in your case.






            share|improve this answer

















            • 1




              Sorry, Rafal, I didn't see you had posted an answer before I posted mine-- we have roughly the same solution. Upvoted.
              – Alexander Nied
              Nov 19 at 21:00











            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53381930%2fclick-event-on-div-with-img-and-text-not-firing-when-clicking-img%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            2 Answers
            2






            active

            oldest

            votes








            2 Answers
            2






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes








            up vote
            2
            down vote



            accepted










            I changed two things that I believe will resolve your issue:




            1. I changed the selector .toggle-panel .active to .toggle-panel.active-- without that, even in the cases where the JS was working as you intended nothing was actually be made visible.

            2. I moved your code from using event.target to event.currentTarget -- the former always points to the clicked element, whereas the latter refers to the element on which the listener has been placed.


            See the snippet below.






            const setActive = (toggles, panels, id) => {
            
  let activePanel = panels.filter(panel => panel.getAttribute('data-toggle') == id)
            
  let activeToggle = toggles.filter(toggle => toggle.getAttribute('data-toggle') == id)
            
  activePanel.forEach(panel => panel.classList.add('active'))
            
  activeToggle.forEach(toggle => toggle.classList.add('active'))
            
}
            

            
const removeActive = (nodes) => {
            
  nodes.forEach(node => node.classList.remove('active'))
            
}
            

            
const handler = (event) => {
            
  event.preventDefault()
            
  let id = event.currentTarget.getAttribute('data-toggle')
            
  let panels = Array(...document.querySelectorAll('.js-toggle-panel'))
            
  let toggles = Array(...document.querySelectorAll('.js-toggle'))
            
  removeActive(panels)
            
  removeActive(toggles)
            
  setActive(toggles, panels, id)
            
}
            

            
let toggles = Array(...document.querySelectorAll('.js-toggle'))
            
toggles.forEach(toggle => toggle.addEventListener('click', handler))

            .toggle-panel {
            
  display: none;
            
}
            

            
.toggle-panel.active {
            
  display: block;
            
}

            <div class="js-toggle toggle" data-toggle="toggle-1">
            
  <img src="https://via.placeholder.com/50"> First toggle
            
</div>
            

            
<div class="js-toggle toggle" data-toggle="toggle-2">
            
  Second toggle
            
</div>
            

            
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-1">
            
  <h1>Toggle 1</h1>
            
</div>
            

            
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-2">
            
  <h1>Second toggle!</h1>
            
</div>








            share|improve this answer

























              up vote
              2
              down vote



              accepted










              I changed two things that I believe will resolve your issue:




              1. I changed the selector .toggle-panel .active to .toggle-panel.active-- without that, even in the cases where the JS was working as you intended nothing was actually be made visible.

              2. I moved your code from using event.target to event.currentTarget -- the former always points to the clicked element, whereas the latter refers to the element on which the listener has been placed.


              See the snippet below.






              const setActive = (toggles, panels, id) => {
              
  let activePanel = panels.filter(panel => panel.getAttribute('data-toggle') == id)
              
  let activeToggle = toggles.filter(toggle => toggle.getAttribute('data-toggle') == id)
              
  activePanel.forEach(panel => panel.classList.add('active'))
              
  activeToggle.forEach(toggle => toggle.classList.add('active'))
              
}
              

              
const removeActive = (nodes) => {
              
  nodes.forEach(node => node.classList.remove('active'))
              
}
              

              
const handler = (event) => {
              
  event.preventDefault()
              
  let id = event.currentTarget.getAttribute('data-toggle')
              
  let panels = Array(...document.querySelectorAll('.js-toggle-panel'))
              
  let toggles = Array(...document.querySelectorAll('.js-toggle'))
              
  removeActive(panels)
              
  removeActive(toggles)
              
  setActive(toggles, panels, id)
              
}
              

              
let toggles = Array(...document.querySelectorAll('.js-toggle'))
              
toggles.forEach(toggle => toggle.addEventListener('click', handler))

              .toggle-panel {
              
  display: none;
              
}
              

              
.toggle-panel.active {
              
  display: block;
              
}

              <div class="js-toggle toggle" data-toggle="toggle-1">
              
  <img src="https://via.placeholder.com/50"> First toggle
              
</div>
              

              
<div class="js-toggle toggle" data-toggle="toggle-2">
              
  Second toggle
              
</div>
              

              
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-1">
              
  <h1>Toggle 1</h1>
              
</div>
              

              
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-2">
              
  <h1>Second toggle!</h1>
              
</div>








              share|improve this answer























                up vote
                2
                down vote



                accepted







                up vote
                2
                down vote



                accepted






                I changed two things that I believe will resolve your issue:




                1. I changed the selector .toggle-panel .active to .toggle-panel.active-- without that, even in the cases where the JS was working as you intended nothing was actually be made visible.

                2. I moved your code from using event.target to event.currentTarget -- the former always points to the clicked element, whereas the latter refers to the element on which the listener has been placed.


                See the snippet below.






                const setActive = (toggles, panels, id) => {
                
  let activePanel = panels.filter(panel => panel.getAttribute('data-toggle') == id)
                
  let activeToggle = toggles.filter(toggle => toggle.getAttribute('data-toggle') == id)
                
  activePanel.forEach(panel => panel.classList.add('active'))
                
  activeToggle.forEach(toggle => toggle.classList.add('active'))
                
}
                

                
const removeActive = (nodes) => {
                
  nodes.forEach(node => node.classList.remove('active'))
                
}
                

                
const handler = (event) => {
                
  event.preventDefault()
                
  let id = event.currentTarget.getAttribute('data-toggle')
                
  let panels = Array(...document.querySelectorAll('.js-toggle-panel'))
                
  let toggles = Array(...document.querySelectorAll('.js-toggle'))
                
  removeActive(panels)
                
  removeActive(toggles)
                
  setActive(toggles, panels, id)
                
}
                

                
let toggles = Array(...document.querySelectorAll('.js-toggle'))
                
toggles.forEach(toggle => toggle.addEventListener('click', handler))

                .toggle-panel {
                
  display: none;
                
}
                

                
.toggle-panel.active {
                
  display: block;
                
}

                <div class="js-toggle toggle" data-toggle="toggle-1">
                
  <img src="https://via.placeholder.com/50"> First toggle
                
</div>
                

                
<div class="js-toggle toggle" data-toggle="toggle-2">
                
  Second toggle
                
</div>
                

                
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-1">
                
  <h1>Toggle 1</h1>
                
</div>
                

                
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-2">
                
  <h1>Second toggle!</h1>
                
</div>








                share|improve this answer












                I changed two things that I believe will resolve your issue:




                1. I changed the selector .toggle-panel .active to .toggle-panel.active-- without that, even in the cases where the JS was working as you intended nothing was actually be made visible.

                2. I moved your code from using event.target to event.currentTarget -- the former always points to the clicked element, whereas the latter refers to the element on which the listener has been placed.


                See the snippet below.






                const setActive = (toggles, panels, id) => {
                
  let activePanel = panels.filter(panel => panel.getAttribute('data-toggle') == id)
                
  let activeToggle = toggles.filter(toggle => toggle.getAttribute('data-toggle') == id)
                
  activePanel.forEach(panel => panel.classList.add('active'))
                
  activeToggle.forEach(toggle => toggle.classList.add('active'))
                
}
                

                
const removeActive = (nodes) => {
                
  nodes.forEach(node => node.classList.remove('active'))
                
}
                

                
const handler = (event) => {
                
  event.preventDefault()
                
  let id = event.currentTarget.getAttribute('data-toggle')
                
  let panels = Array(...document.querySelectorAll('.js-toggle-panel'))
                
  let toggles = Array(...document.querySelectorAll('.js-toggle'))
                
  removeActive(panels)
                
  removeActive(toggles)
                
  setActive(toggles, panels, id)
                
}
                

                
let toggles = Array(...document.querySelectorAll('.js-toggle'))
                
toggles.forEach(toggle => toggle.addEventListener('click', handler))

                .toggle-panel {
                
  display: none;
                
}
                

                
.toggle-panel.active {
                
  display: block;
                
}

                <div class="js-toggle toggle" data-toggle="toggle-1">
                
  <img src="https://via.placeholder.com/50"> First toggle
                
</div>
                

                
<div class="js-toggle toggle" data-toggle="toggle-2">
                
  Second toggle
                
</div>
                

                
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-1">
                
  <h1>Toggle 1</h1>
                
</div>
                

                
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-2">
                
  <h1>Second toggle!</h1>
                
</div>








                const setActive = (toggles, panels, id) => {
                
  let activePanel = panels.filter(panel => panel.getAttribute('data-toggle') == id)
                
  let activeToggle = toggles.filter(toggle => toggle.getAttribute('data-toggle') == id)
                
  activePanel.forEach(panel => panel.classList.add('active'))
                
  activeToggle.forEach(toggle => toggle.classList.add('active'))
                
}
                

                
const removeActive = (nodes) => {
                
  nodes.forEach(node => node.classList.remove('active'))
                
}
                

                
const handler = (event) => {
                
  event.preventDefault()
                
  let id = event.currentTarget.getAttribute('data-toggle')
                
  let panels = Array(...document.querySelectorAll('.js-toggle-panel'))
                
  let toggles = Array(...document.querySelectorAll('.js-toggle'))
                
  removeActive(panels)
                
  removeActive(toggles)
                
  setActive(toggles, panels, id)
                
}
                

                
let toggles = Array(...document.querySelectorAll('.js-toggle'))
                
toggles.forEach(toggle => toggle.addEventListener('click', handler))

                .toggle-panel {
                
  display: none;
                
}
                

                
.toggle-panel.active {
                
  display: block;
                
}

                <div class="js-toggle toggle" data-toggle="toggle-1">
                
  <img src="https://via.placeholder.com/50"> First toggle
                
</div>
                

                
<div class="js-toggle toggle" data-toggle="toggle-2">
                
  Second toggle
                
</div>
                

                
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-1">
                
  <h1>Toggle 1</h1>
                
</div>
                

                
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-2">
                
  <h1>Second toggle!</h1>
                
</div>





                const setActive = (toggles, panels, id) => {
                
  let activePanel = panels.filter(panel => panel.getAttribute('data-toggle') == id)
                
  let activeToggle = toggles.filter(toggle => toggle.getAttribute('data-toggle') == id)
                
  activePanel.forEach(panel => panel.classList.add('active'))
                
  activeToggle.forEach(toggle => toggle.classList.add('active'))
                
}
                

                
const removeActive = (nodes) => {
                
  nodes.forEach(node => node.classList.remove('active'))
                
}
                

                
const handler = (event) => {
                
  event.preventDefault()
                
  let id = event.currentTarget.getAttribute('data-toggle')
                
  let panels = Array(...document.querySelectorAll('.js-toggle-panel'))
                
  let toggles = Array(...document.querySelectorAll('.js-toggle'))
                
  removeActive(panels)
                
  removeActive(toggles)
                
  setActive(toggles, panels, id)
                
}
                

                
let toggles = Array(...document.querySelectorAll('.js-toggle'))
                
toggles.forEach(toggle => toggle.addEventListener('click', handler))

                .toggle-panel {
                
  display: none;
                
}
                

                
.toggle-panel.active {
                
  display: block;
                
}

                <div class="js-toggle toggle" data-toggle="toggle-1">
                
  <img src="https://via.placeholder.com/50"> First toggle
                
</div>
                

                
<div class="js-toggle toggle" data-toggle="toggle-2">
                
  Second toggle
                
</div>
                

                
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-1">
                
  <h1>Toggle 1</h1>
                
</div>
                

                
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-2">
                
  <h1>Second toggle!</h1>
                
</div>






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 19 at 20:59









                Alexander Nied

                3,6801827




                3,6801827
























                    up vote
                    2
                    down vote













                    Instead of event.target you should use event.currentTarget in your handler function to return node to which event listener is attached. event.target is returning <img> node, not <div> with data-toggle in your case.






                    share|improve this answer

















                    • 1




                      Sorry, Rafal, I didn't see you had posted an answer before I posted mine-- we have roughly the same solution. Upvoted.
                      – Alexander Nied
                      Nov 19 at 21:00















                    up vote
                    2
                    down vote













                    Instead of event.target you should use event.currentTarget in your handler function to return node to which event listener is attached. event.target is returning <img> node, not <div> with data-toggle in your case.






                    share|improve this answer

















                    • 1




                      Sorry, Rafal, I didn't see you had posted an answer before I posted mine-- we have roughly the same solution. Upvoted.
                      – Alexander Nied
                      Nov 19 at 21:00













                    up vote
                    2
                    down vote










                    up vote
                    2
                    down vote









                    Instead of event.target you should use event.currentTarget in your handler function to return node to which event listener is attached. event.target is returning <img> node, not <div> with data-toggle in your case.






                    share|improve this answer












                    Instead of event.target you should use event.currentTarget in your handler function to return node to which event listener is attached. event.target is returning <img> node, not <div> with data-toggle in your case.







                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Nov 19 at 20:47









                    Rafał

                    213




                    213








                    • 1




                      Sorry, Rafal, I didn't see you had posted an answer before I posted mine-- we have roughly the same solution. Upvoted.
                      – Alexander Nied
                      Nov 19 at 21:00














                    • 1




                      Sorry, Rafal, I didn't see you had posted an answer before I posted mine-- we have roughly the same solution. Upvoted.
                      – Alexander Nied
                      Nov 19 at 21:00








                    1




                    1




                    Sorry, Rafal, I didn't see you had posted an answer before I posted mine-- we have roughly the same solution. Upvoted.
                    – Alexander Nied
                    Nov 19 at 21:00




                    Sorry, Rafal, I didn't see you had posted an answer before I posted mine-- we have roughly the same solution. Upvoted.
                    – Alexander Nied
                    Nov 19 at 21:00


















                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid …



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.





                    Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                    Please pay close attention to the following guidance:


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid …



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53381930%2fclick-event-on-div-with-img-and-text-not-firing-when-clicking-img%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    -

                    Popular posts from this blog

                    Wiesbaden

                    Image
                    Wappen Deutschlandkarte 50.0825 8.24 117 Koordinaten: 50° 5′  N , 8° 14′  O Basisdaten Bundesland: Hessen Regierungsbezirk: Darmstadt Höhe: 117 m ü. NHN Fläche: 203,93 km 2 Einwohner: 278.654 (31. Dez. 2017) [1] Bevölkerungsdichte: 1366 Einwohner je km 2 Postleitzahlen: 65183–65207, 55246, 55252 Vorlage:Infobox Gemeinde in Deutschland/Wartung/PLZ enthält Text Vorwahlen: 0611, 06122, 06127, 06134 Kfz-Kennzeichen: WI Gemeindeschlüssel: 06 4 14 000 LOCODE: DE WIB NUTS: DE714 Stadtgliederung: 26 Ortsbezirke Adresse der Stadtverwaltung: Schlossplatz 6 65183 Wiesbaden Webpräsenz: www.wiesbaden.de Oberbürgermeister: Sven Gerich (SPD) Lage der Landeshauptstadt Wiesbaden in Hessen und im Regierungsbezirk Darmstadt Offizielles Logo der Landeshauptstadt Wiesbaden Flagge der Landeshauptstadt Wiesbaden Wiesbaden is...
                    Read more

                    Marschland

                    Image
                    Kilometerweite Marsch in den Vier- und Marschlanden am Elbdeich Die Wedeler Marschlandschaft in Schleswig-Holstein Der Hadelner Kanal zur Entwässerung der Marsch Die tief gelegene Marsch und ein Entwässerungskanal Das Schöpfwerk Otterndorf im Land Hadeln zur Entwässerung der Medem verfügte damals bereits über die größte Kreiselpumpe Europas. Das Schöpfwerk in Neuhaus für die Aue und des Neuhaus-Bülkauer Kanals Als Marsch(land) (v. niederdt., altsächs. mersc ) – auch Masch , Mersch oder Schwemmland genannt – bezeichnet man eine nacheiszeitlich entstandene geomorphologische Landform im Gebiet der nordwestdeutschen Küsten und Flüsse sowie vergleichbare Landformen weltweit. Inhaltsverzeichnis 1 Landschaft 2 Entstehung 3 Marschböden 4 Nutzung 5 Marschgebiete in Deutschland 6 Siehe auch 7 Literatur 8 Weblinks 9 Einzelnachweise Landschaft | Marschen sind generell flache Landstriche ohne natürliche Erhebungen. Si...
                    Read more

                    Dieringhausen

                    Image
                    Dieringhausen Stadt Gummersbach 50.982777777778 7.5316666666667 165 Koordinaten: 50° 58′ 58″  N , 7° 31′ 54″  O Höhe: 165  (160–245)  m Einwohner: 5055  (30. Jun. 2016) Postleitzahl: 51645 Vorwahl: 02261 Lage von Dieringhausen in Gummersbach Im Hohl ca. 1927–1930 Ansicht von Südwesten bei Bünghausen Dieringhausen (im örtlichen Dialekt Dierkesen ) ist ein Ortsteil von Gummersbach im Oberbergischen Kreis, Regierungsbezirk Köln, Nordrhein-Westfalen (Deutschland). Inhaltsverzeichnis 1 Geographie 2 Geschichte 3 Kultur 3.1 Sehenswürdigkeiten 3.2 Regelmäßige Veranstaltungen 4 Infrastruktur und Wirtschaft 4.1 Verkehr 4.1.1 Schienen- und Busverkehr 4.1.2 Straßen 4.2 Öffentliche Einrichtungen 4.2.1 Schulen und Bildungseinrichtungen 4.2.2 Kirchliche Einrichtungen 5 Persönlichkeiten 5.1 In Dieringhausen geboren 5.2 In Dieringhausen gelebt 6 Einzelnachweise 7 ...
                    Read more