simple code:
-------------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>
Hi y'all. This is my code. What i am trying to do is: if I click whatever button, the span "above" it will display inline. But I have to click multiple times for the button to work. Please help! Thank you so much!
Or if you guys have any idea to work with multiple buttons with the same event listener and event handler, it'd be great 👍. thank you again
document.querySelectorAll('.span').forEach((ele) => {
ele.addEventListener('click', (e) => {
ele.classList.toggle('red');
})
}).span {
font-size: 16px;
cursor: pointer;
background: yellow;
color: #fff;
}
.red {
background-color: red;
}<span class="span">Red or Yellow</span>
<span class="span">Red or Yellow</span>I hope this will give you some ideas. Good luck