Search code examples
jqueryinstances

Combine multiple instances of jquery code


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>

Solution

  •     <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.