Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- It's a bit unclear why you're not using actual `table`, `tr`, and `td` elements so I'll skip over that.
- The key issue is that when you're adding multiple listeners to the button when you click on it.
- 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.
- `showLearn` finds the closest ancestor element with a `row` class, and then adds a new class to that element's `learn` child element.
- <!-- begin snippet: js hide: false console: true babel: false -->
- <!-- language: lang-js -->
- const showButs = document.querySelectorAll('.showBut');
- showButs.forEach(b => {
- b.addEventListener('click', showLearn, false);
- });
- function showLearn(e) {
- const row = this.closest('.row');
- const learn = row.querySelector('.learn');
- learn.classList.add('show');
- }
- <!-- language: lang-css -->
- .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: none;
- }
- .show { display: inline; }
- .showBut {
- position: absolute;
- top: 30px;
- z-index: 1;
- right: 0;
- font-size: 15px;
- padding: 7px 5px;
- border-radius: 10px;
- background: transparent;
- }
- <!-- language: lang-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>
- <button class="showBut" type="button" value="Learn more">Learn more</button>
- </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>
- <button class="showBut" type="button">Learn more</button>
- </div>
- <!-- end snippet -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement