how can i modify a javascript function to operate on multiple buttons?

Question

I want to use the same javascript function on more than 1 button , but it does not work. here is:

HTML

<a href="#" id="buton"><p> SOMETHING</p></a>
<a href="#" id="buton"><p> OTHERS</p></a>

<div id="link" style="display:none;">
    <h1>SOMETHING</h1>
</div>
<div id="link" style="display:none;">
    <h1>OTHERS</h1>
</div>

and JAVASCRIPT

<script>
$('#buton').click(function() {
$('#link').toggle('slow', function() {
// Animation complete.
});
});
</script>

so on the first buton it does work, but on the second one ( OTHERS ) it does not work. Why? and how can I fix that? ( I am about to use more than 10 buttons on my original page, so please give me the best idea )

1.) ID attribute must be unique, hence your HTML is invalid. 2.) You can set a class attribute for all the buttons and set the event handler in the JS like $(".buttonclass").click(... — Alfabravo
– Alfabravo, Commented Apr 17, 2013 at 16:31

Niet the Dark Absol · Accepted Answer · 2013-04-17 16:30:04Z

4

IDs MUST be unique.

You should try using a class instead.

HTML

<a href="#" class="buton" data-for="link1"><p> SOMETHING</p></a>
<a href="#" class="buton" data-for="link2"><p> OTHERS</p></a>

<div id="link1" style="display:none;">
    <h1>SOMETHING</h1>
</div>
<div id="link2" style="display:none;">
    <h1>OTHERS</h1>
</div>

and JAVASCRIPT

<script>
$('.buton').click(function() {
  $('#'+this.getAttribute("data-for")).toggle('slow', function() {
    // Animation complete.
  });
});
</script>

answered Apr 17, 2013 at 16:30

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

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

4 Comments

colestrode Over a year ago

instead of getAttribute("data-for"), you can use the jquery data() function: $(this).data('for');

Fabrício Matté Over a year ago

jQuery will create an internal cache (.data() expando property) after the first call to .data() that retrieves the data attribute value. Murder all the unicorns.

user2202784 Over a year ago

so there is no way putting a general statement instead of link1,link2..... ? cause if I create (for example ) 10 buttons, and then I eliminate the 4th and 5th I would have to modify all of them (from 6-10)

Niet the Dark Absol Over a year ago

The numbers don't matter, what matters is that each data-for link has a corresponding element with that ID.

Halcyon · Accepted Answer · 2013-04-17 16:30:07Z

0

In HTML ids must be unique. The browser enforces this by returning only one result for #link.

You can either give them different ids or use a class.

$("#link1,#link2,#link3").toggle(..)

or

$(".links").toggle(..)

answered Apr 17, 2013 at 16:30

Halcyon

57.7k10 gold badges93 silver badges131 bronze badges

Collectives™ on Stack Overflow

how can i modify a javascript function to operate on multiple buttons?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related