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, Jul 22 '12 at 11:24

score 1 · Accepted Answer · answered Jul 22 '12 at 11:00

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 '12 at 11:00

Andreas Nilsson

231
1
6

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. – David Barker Jul 22 '12 at 11:06

thebjorn · Answer 2 · 2012-07-22T11:14:05.353

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 '12 at 11:14

answered Jul 22 '12 at 11:08

thebjorn

26,297
11
96
138

In the above example how would i specify what div each id-reference is to toggle? – Legs Jul 22 '12 at 11:26
It will toggle the one you clicked on -- which is bound to `this` inside the event handler (and only that one). – thebjorn Jul 22 '12 at 11:27
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? – thebjorn Jul 22 '12 at 11:31
They all toggle the div directly below them however some are contained in different div's – Legs Jul 22 '12 at 11:33
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. – thebjorn Jul 22 '12 at 11:40

score 0 · Answer 3 · answered Jul 22 '12 at 11:30

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 '12 at 11:30

Yury Tarabanko

44,270
9
84
98

You should include the substantial bits of code from the fiddle in your answer. – millimoose Jul 22 '12 at 11:32
Data attributes: http://ejohn.org/blog/html-5-data-attributes/ .. and in jQuery http://api.jquery.com/data/ – thebjorn Jul 22 '12 at 11:37
175 lines have become 9! Thank you so much! – Legs Jul 22 '12 at 12:18

Combine multiple instances of jquery code

3 Answers3