Combine Multiple Jquery Functions into single function

Question

I am very new to jquery and am wondering how to combine jquery functions. Right now, my code is a bit of a mess! I've done some research and haven't been able to keep it functioning properly when I combine functions. I don't want to keep my code looking like this, but at least for now it is working properly (except in Firefox). What is the best practice for combining functions?

    <script type="text/javascript">
$( document ).ready(function() {
    jQuery(function(){
      jQuery("#music").click(function () {
        jQuery("#musicinfo").slideToggle('slow');
        jQuery("#fpinfo, #behindinfo, #behindinfo, #signupinfo").hide('slow');

      });
    });
    });
</script>





<script type="text/javascript">
$( document ).ready(function() {
    jQuery(function(){
      jQuery("#fproduct").click(function () {
        jQuery("#fpinfo").slideToggle('slow');
        jQuery("#musicinfo, #behindinfo, #behindinfo, #signupinfo").hide('slow');

      });
    });
    });
</script>




<script type="text/javascript">
$( document ).ready(function() {
    jQuery(function(){
      jQuery("#behind").click(function () {
        jQuery("#behindinfo").slideToggle('slow');
        jQuery("#fpinfo, #musicinfo, #signupinfo").hide('slow');

      });
    });
    });
</script>

  <script type="text/javascript">
  $( document ).ready(function() {
    jQuery(function(){
      jQuery(".exit").click(function () {
        jQuery("#behindinfo, #musicinfo, #fpinfo, #signupinfo").hide('slow');

      });
    });
    });
</script>

<script type="text/javascript">
$( document ).ready(function() {
    jQuery(function(){
      jQuery("#signup").click(function () {
        jQuery("#signupinfo").slideToggle('slow');
        jQuery("#fpinfo, #musicinfo, #behindinfo").hide('slow');

      });
    });
    });
</script>

  <script type="text/javascript">
  $( document ).ready(function() {
    jQuery(function(){
      jQuery(".exit").click(function () {
        jQuery("#behindinfo, #musicinfo, #fpinfo, #signupinfo").hide('slow');

      });
    });
    });
</script>



<script>
     $('#behind, #fproduct, #music, #signup').click(function(){
         var divLoc = $('#top').offset();
         $('html, body').animate({scrollTop: divLoc.top}, "slow");
     });
</script>

This is a better fit for codereview.stackexchange.com I think. — Andy
– Andy, Commented Feb 18, 2014 at 15:30
it doesn't sound like you want to combine functions. looks like you're trying to combine script blocks. simple answer is that you can just do it by copying all the code into one block ready function. as for how the code should be laid out, codereview is indeed a good place — Sonic Soul
– Sonic Soul, Commented Feb 18, 2014 at 15:40

georg · Accepted Answer · 2014-02-18 15:41:42Z

Have one single JS block, in this block one single invocation of ready (which is just the $ function):

  <script type="text/javascript">
     $(function() {

         $("#whatever").click(function() {
           // stuff
         });

         $("#somethingelse").click(function() {
           // stuff
         });
     });
  </script>

Also, try working with classes and html layout instead of explicit IDs. For example, if all clickable items are buttons, and info divs are right after them, you can simplify this:

 $("#foobar").click(function() {
     $("#foobarinfo").slideToggle("slow");
 });
 $("#blah").click(function() {
     $("#blahinfo").slideToggle("slow");
 });
 //etc, many many times

to something like:

  $("button").click(function() {
     $(this).next().slideToggle("slow");
  });
  // that's all

I guess your entire piece of code can be rewritten in three or four lines. Feel free to share your html markup if you're interested.

Habib Rahmoun · Accepted Answer · 2014-02-18 15:32:24Z

0

Something like that :

    <script type="text/javascript">
$( document ).ready(function() {

      jQuery("#music").click(function () {
        jQuery("#musicinfo").slideToggle('slow');
        jQuery("#fpinfo, #behindinfo, #behindinfo, #signupinfo").hide('slow');

      });


      jQuery("#fproduct").click(function () {
        jQuery("#fpinfo").slideToggle('slow');
        jQuery("#musicinfo, #behindinfo, #behindinfo, #signupinfo").hide('slow');

      });

        jQuery("#behind").click(function () {
        jQuery("#behindinfo").slideToggle('slow');
        jQuery("#fpinfo, #musicinfo, #signupinfo").hide('slow');

      });

       jQuery(".exit").click(function () {
        jQuery("#behindinfo, #musicinfo, #fpinfo, #signupinfo").hide('slow');

      });

      jQuery("#signup").click(function () {
        jQuery("#signupinfo").slideToggle('slow');
        jQuery("#fpinfo, #musicinfo, #behindinfo").hide('slow');

      });

      jQuery(".exit").click(function () {
        jQuery("#behindinfo, #musicinfo, #fpinfo, #signupinfo").hide('slow');

      });

    $('#behind, #fproduct, #music, #signup').click(function(){
         var divLoc = $('#top').offset();
         $('html, body').animate({scrollTop: divLoc.top}, "slow");
     });
    });


</script>

answered Feb 18, 2014 at 15:32

Habib Rahmoun

2082 silver badges8 bronze badges

1 Comment

Habib Rahmoun Over a year ago

You're welcome. You can also replace "JQuery" to "$".

DhruvJoshi · Accepted Answer · 2014-02-18 15:37:25Z

After combining and consistently using $ sign for jquery we get something like this:

<script type="text/javascript">
$( document ).ready(function() {

    $("#music").click(function () {
            $("#musicinfo").slideToggle('slow');
            $("#fpinfo, #behindinfo, #behindinfo, #signupinfo").hide('slow');
            });
    $("#behind").click(function () {
        $("#behindinfo").slideToggle('slow');
        $("#fpinfo, #musicinfo, #signupinfo").hide('slow');
            });
    $("#fproduct").click(function () {
        $("#fpinfo").slideToggle('slow');
        $("#musicinfo, #behindinfo, #behindinfo, #signupinfo").hide('slow');
            });
    $(".exit").click(function () {
        $("#behindinfo, #musicinfo, #fpinfo, #signupinfo").hide('slow');
            });
    $("#signup").click(function () {
        $("#signupinfo").slideToggle('slow');
        $("#fpinfo, #musicinfo, #behindinfo").hide('slow');

            });
      $(".exit").click(function () {
        $("#behindinfo, #musicinfo, #fpinfo, #signupinfo").hide('slow');

      });

     $('#behind, #fproduct, #music, #signup').click(function(){
         var divLoc = $('#top').offset();
         $('html, body').animate({scrollTop: divLoc.top}, "slow");
     });
});
</script>

Collectives™ on Stack Overflow

Combine Multiple Jquery Functions into single function

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related