Advertisement
Guest User

Untitled

a guest
Mar 31st, 2022
147
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.18 KB | None | 0 0
  1. It's a bit unclear why you're not using actual `table`, `tr`, and `td` elements so I'll skip over that.
  2.  
  3. The key issue is that when you're adding multiple listeners to the button when you click on it.
  4.  
  5. In this example I've picked up the shotButs (now `buttons` not inputs), looped over them, and attached listeners to them (rather than using inline JS). Those listeners listen for the click, and then call the showLearn handler.
  6.  
  7. `showLearn` finds the closest ancestor element with a `row` class, and then adds a new class to that element's `learn` child element.
  8.  
  9. <!-- begin snippet: js hide: false console: true babel: false -->
  10.  
  11. <!-- language: lang-js -->
  12.  
  13. const showButs = document.querySelectorAll('.showBut');
  14.  
  15. showButs.forEach(b => {
  16. b.addEventListener('click', showLearn, false);
  17. });
  18.  
  19. function showLearn(e) {
  20. const row = this.closest('.row');
  21. const learn = row.querySelector('.learn');
  22. learn.classList.add('show');
  23. }
  24.  
  25. <!-- language: lang-css -->
  26.  
  27. .table {
  28. display: block;
  29. }
  30.  
  31. .row {
  32. position: relative;
  33. margin-bottom: 45px;
  34. }
  35.  
  36. .learn {
  37. font-size: 12px;
  38. position: absolute;
  39. top: 30px;
  40. left: 0;
  41. z-index: -1;
  42. text-align: left;
  43. display: none;
  44. }
  45.  
  46. .show { display: inline; }
  47.  
  48. .showBut {
  49. position: absolute;
  50. top: 30px;
  51. z-index: 1;
  52. right: 0;
  53. font-size: 15px;
  54. padding: 7px 5px;
  55. border-radius: 10px;
  56. background: transparent;
  57. }
  58.  
  59. <!-- language: lang-html -->
  60.  
  61. <div class="table">
  62. <div class="row">
  63. <div class="thead">Regular Polish</div>
  64. <div class="td">$20</div>
  65. <span class="learn">Trimming, shapping, culticle removing, Gel polish put on</span>
  66. <button class="showBut" type="button" value="Learn more">Learn more</button>
  67. </div>
  68. <div class="row">
  69. <div class="thead">Gel Polish</div>
  70. <div class="td">$30</div>
  71. <span class="learn">Trimming, shapping, culticle removing, Gel polish put on</span>
  72. <button class="showBut" type="button">Learn more</button>
  73. </div>
  74.  
  75. <!-- end snippet -->
  76.  
  77.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement