How can i put my arrow next to the header with the toggle still working?

Question

I like to have my arrow (which i toggle on click) next to my headertext.
I tried to put the arrow <div> into the H1 tag, but the toggle doesn't work then.
Could someone help me?
I prefer you add the edited snippet to your answer

 $('a[id^="module-tab-"]').click(function() { $(this).next('.hi').toggleClass("left-image right-image"); }); 

 .left-image { background-image: url('http://i.stack.imgur.com/euD9p.png'); width: 20px; height: 20px; background-repeat: no-repeat; } .right-image { background-image: url('http://i.stack.imgur.com/dzs9m.png'); width: 20px; height: 20px; background-repeat: no-repeat; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <table> <tr style='background-color: lightgray; min-height: 200px;'> <td colspan='10'> <a href='#' id='module-tab-1' class='toggler' data-prod-cat='1'><h1 style='margin-bottom: 0px;'> Gearchiveerde Storingen </h1></a> <div class='left-image hi'></div> </td> </tr> </table> 

Answer 1

To achieve this you need to make the div and the h1 display: inine-block so they can sit alongside each other. You also can move the div inside the a element. Finally you need to then amend the jQuery to use find() instead of next() . Try this:

 $('a[id^="module-tab-"]').click(function() { $(this).find('.hi').toggleClass("left-image right-image"); }); 

 h1 { display: inline-block; } div.hi { width: 20px; height: 20px; background-repeat: no-repeat; display: inline-block; } .left-image { background-image: url('http://i.stack.imgur.com/euD9p.png'); } .right-image { background-image: url('http://i.stack.imgur.com/dzs9m.png'); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <table> <tr style='background-color: lightgray; min-height: 200px;'> <td colspan='10'> <a href='#' id='module-tab-1' class='toggler' data-prod-cat='1'> <h1 style='margin-bottom: 0px;'>Gearchiveerde Storingen</h1> <div class='left-image hi'></div> </a> </td> </tr> </table> 

Answer 2

Make your #module-tab-1 and .left-image.hi display inline-block . Like:

#module-tab-1 {
  display: inline-block;
}

.left-image.hi {
  display: inline-block;
}

Have a look at the snippet below:

 $('a[id^="module-tab-"]').click(function() { $(this).next('.hi').toggleClass("left-image right-image"); }); 

 #module-tab-1 { display: inline-block; } .left-image.hi { display: inline-block; } .left-image { background-image: url('http://i.stack.imgur.com/euD9p.png'); width: 20px; height: 20px; background-repeat: no-repeat; } .right-image { background-image: url('http://i.stack.imgur.com/dzs9m.png'); width: 20px; height: 20px; background-repeat: no-repeat; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <table> <tr style='background-color: lightgray; min-height: 200px;'> <td colspan='10'> <a href='#' id='module-tab-1' class='toggler' data-prod-cat='1'><h1 style='margin-bottom: 0px;'> Gearchiveerde Storingen </h1></a> <div class='left-image hi'></div> </td> </tr> </table> 

Hope this helps!