Using same click function for multiple elements (Jquery)

Question

Hi Im having troubles with getting the following to work. Only the first element works, how should I think?

<div class="hi">
    <a id="tabBtn" href="javascript:void(0)"></a>
</div>
<div class="hi">
    <a id="tabBtn" href="javascript:void(0)"></a>
</div>
<div class="hi">
    <a id="tabBtn" href="javascript:void(0)"></a>
</div>

<script>
    $('#tabBtn').on("click",function(){
        if ($(this).parent('.hi').css('max-height') == '65px'){
            $(this).parent(".hi").addClass('open');
        }
        else{
            $(this).parent(".hi").removeClass('open');
        }
    })
</script>

you can't use same id's for multiple elements

The Process
– The Process

2016-04-06 14:18:30 +00:00
Commented Apr 6, 2016 at 14:18 — The Process
– The Process, Commented Apr 6, 2016 at 14:18
use class instead of id for tabBtn

Akash Rajbanshi
– Akash Rajbanshi

2016-04-06 14:18:58 +00:00
Commented Apr 6, 2016 at 14:18 — Akash Rajbanshi
– Akash Rajbanshi, Commented Apr 6, 2016 at 14:18

Jacob G · Accepted Answer · 2016-04-06 14:24:18Z

3

Using the same id on multiple elements is invalid, use a class instead:

    $('.tabBtn').on("click", function() {
      if ($(this).parent('.job').css('max-height') == '65px') {
        $(this).parent(".job").addClass('open');
      } else {
        $(this).parent(".job").removeClass('open');
      }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="hi">
  <a class="tabBtn" href="javascript:void(0)">Hello</a>
</div>
<div class="hi">
  <a class="tabBtn" href="javascript:void(0)">Hello2</a>
</div>
<div class="hi">
  <a class="tabBtn" href="javascript:void(0)">Hello3</a>
</div>

edited Apr 6, 2016 at 14:24

answered Apr 6, 2016 at 14:19

Jacob G

14.2k4 gold badges50 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zamboney · Accepted Answer · 2016-04-06 14:20:30Z

1

first thing first id attribute should be ONCE per page

having say that all you need to do is work on the on function from the document and in a selecter way like so

$(document).on("click",".tabBtn",function(){
  //do work
})

answered Apr 6, 2016 at 14:20

Zamboney

2,00712 silver badges22 bronze badges

Collectives™ on Stack Overflow

Using same click function for multiple elements (Jquery)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related