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>

Answer 1

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 button s, 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.

Answer 2

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>

Answer 3

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>