código sencillo:

 -------------css-------------- <style> .table{ display: block; } .row{ position: relative; margin-bottom: 45px; } .learn{ font-size: 12px; position: absolute; top: 30px; left: 0; z-index:-1; text-align: left; display: inline; } .row input{ position: absolute; top: 30px; z-index: 1; right: 0; font-size: 15px; padding: 7px 5px; border-radius: 10px; background: transparent; } </style> -----------------html------------------- <div class="table"> <div class="row"> <div class="thead">Regular Polish</div> <div class="td">$20</div> <span class="learn">Trimming, shapping, culticle removing, Gel polish put on</span> <input class="showBut" type="submit" onclick="showLearn();" value="Learn more"></input> </div> <div class="row"> <div class="thead">Gel Polish</div> <div class="td">$30</div> <span class="learn">Trimming, shapping, culticle removing, Gel polish put on</span> <input class="showBut" type="submit" onclick="showLearn();" value="Learn more"></input> </div> ----------------script--------------- <script> let learn = document.querySelectorAll('.learn') let showBut = document.querySelectorAll('.showBut'); function showLearn(){ for (const [index, i ] of showBut.entries()){ i.addEventListener('click', (e) => { learn[index].style.display = (learn[index].style.display === 'none') ? 'inline' : 'none'; } } }; </script>

hola a todos Este es mi código. Lo que estoy tratando de hacer es: si hago clic en cualquier botón, el intervalo "arriba" se mostrará en línea. Pero tengo que hacer clic varias veces para que funcione el botón. ¡Por favor ayuda! ¡Muchas gracias!

O si tienen alguna idea para trabajar con varios botones con el mismo detector de eventos y controlador de eventos, sería genial 👍. gracias de nuevo