Combine multiple instances of jquery code

Question

I am currently using the below to toggle multiple div's but am wondering if i can combine all of these into one?

<script type="text/javascript">
$(document).ready(function() {
    $("#tvehicle").click(function() {
        $("#div7").toggle();
    });
});
</script>

<script type="text/javascript">
$(document).ready(function() {
    $("#tvehicle2").click(function() {
        $("#vehicle2").toggle();
    });
});
</script>

<script type="text/javascript">
$(document).ready(function() {
    $("#tproperty").click(function() {
        $("#div8").toggle();
    });
});
</script>

<script type="text/javascript">
$(document).ready(function() {
    $("#thproperty1").click(function() {
        $("#hproperty1").toggle();
    });
});
</script>

<script type="text/javascript">
$(document).ready(function() {
    $("#thproperty2").click(function() {
        $("#hproperty2").toggle();
    });
});
</script>

<script type="text/javascript">
$(document).ready(function() {
    $("#thproperty3").click(function() {
        $("#hproperty3").toggle();
    });
});
</script>

@DavidBarker the HTML has a lot of senstive work stuff in but i will strip that out and replace it with something else and post it when i get a chance — Legs
– Legs, Commented Jul 22, 2012 at 11:24

Andreas Nilsson · Accepted Answer · 2012-07-22 11:00:52Z

1

    <script type="text/javascript">
$(document).ready(function(){
 $("#tvehicle").click(function(){
  $("#div7").toggle();
 });

$("#tvehicle2").click(function(){
 $("#vehicle2").toggle();
});

//AND SO ON...

});
</script>

You can put all functions in one single document.ready function. Like above :)... Also you dont have to have new <script> tags for every function.

answered Jul 22, 2012 at 11:00

Andreas Nilsson

2211 silver badge6 bronze badges

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

1 Comment

David Barker Over a year ago

You can remove alot more still legs, this is a good answer but you should make some other changes to your HTML structure as well to reduce it much much further.

thebjorn · Accepted Answer · 2012-07-22 11:14:05Z

1

Add a class to all the divs, e.g.:

<div id="tvehicle2" class="toggleable"> ... </div>

then you can do:

$(".toggleable").click(function () {
    $(this).toggle();
});

if you don't want (or can't) add a class to all the toggleable items, you can also combine multiple id-references in a selector:

$('#tvehicle1, #tvehicle2, #tv3').click(function () {
    $(this).toggle();
});

edited Jul 22, 2012 at 11:14

answered Jul 22, 2012 at 11:08

thebjorn

27.6k12 gold badges107 silver badges152 bronze badges

5 Comments

Legs Over a year ago

In the above example how would i specify what div each id-reference is to toggle?

thebjorn Over a year ago

It will toggle the one you clicked on -- which is bound to this inside the event handler (and only that one).

thebjorn Over a year ago

sorry, I see what your problem is.. the toggled items aren't the same as the ones being clicked. Do they have any dom-relationship, e.g. is one contained in/next to the other?

Legs Over a year ago

They all toggle the div directly below them however some are contained in different div's

thebjorn Over a year ago

If directly below means the same as next, you could use $(this).next().toggle(), however the better solution is to use data-* attributes like @Yury explained in another answer.

Yury Tarabanko · Accepted Answer · 2012-07-22 11:30:48Z

0

You can use data attributes to specify which element to toggle. example

$(document).ready(function(){
var toggler = function() {
   var toToggle = $(this).data().toggleId; //Id of an element to toggle

   $("#" + toToggle).toggle();        
};

$(".togglers").on("click", ".toggler", toggler);
});

HTML structure

<div class="togglers">
<div class="toggler" data-toggle-id="to-toggle-1">Click to toggle 1</div>

<div class="to-toggle" id="to-toggle-1">I will be toggled #1</div>

<div class="toggler" data-toggle-id="to-toggle-2">Click to toggle 2</div>

<div class="to-toggle" id="to-toggle-2">I will be toggled #2</div>

<div class="toggler" data-toggle-id="to-toggle-3">Click to toggle 3</div>

<div class="to-toggle" id="to-toggle-3">I will be toggled #3</div>
</div>

answered Jul 22, 2012 at 11:30

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

3 Comments

millimoose Over a year ago

You should include the substantial bits of code from the fiddle in your answer.

thebjorn Over a year ago

Data attributes: ejohn.org/blog/html-5-data-attributes .. and in jQuery api.jquery.com/data

Legs Over a year ago

175 lines have become 9! Thank you so much!

Collectives™ on Stack Overflow

Combine multiple instances of jquery code

3 Answers 3

1 Comment

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related