.slideToggle issue in Firefox

Hello. My site http://charleybiggs.com.s64567.gridserver.com/ is working properly in Chrome and Safari. When you click on certain boxes, specific divs load at the top of the page. In Firefox though these divs are automatically showing when the page loads. They are supposed to be hidden until a box is clicked. Anyone have any idea why it's doing this?

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

      });
    });
</script>





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

      });
    });
</script>




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

      });
    });
</script>

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

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

      });
    });
</script>

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

Code (markup):

 

All those could be combined into one function...
Something along the lines of

$("#selector1,#selector2").click(function() {
$(this).show();
}) 

Code (markup):

And so forth

 

Sorry, I've never really used jquery before! I figured there was a way. Do you think that might be the issue?

 

You also haven't done this within the $(document).ready() function...
I'm sorry, I'm on mobile, else I would rewrite it.

 

No problem. I wrapped it in the $(document).ready() function and the functionality is still off in Firefox. Works beautifully in Safari and Chrome though!

 

Nope. It works just fine in both FF and Chrome. Maybe you have either a weird plugin or something running in Firefox, or perhaps there is a problem with the version of Firefox you're running?

 

Besides - with a little bit of refactoring, I think you could rewrite the whole bit to something like this:

<script type="text/javascript">
$(document).ready(function() {
  $('.toggle').click(function() {
  var getID = $(this).attr('id');
  $('#'+getID+'info').slideToggle('slow');
  $(".toggleinfo").not('#'+getID+'info').hide('slow');
  })
  $('.exit').click(function() {
  $('.toggleinfo').hide('slow');
  })
})
</script>

Code (markup):

Which basically gets the ID from the currently clicked item (.toggle) and hides all with class (.toggleinfo) - this will of course mean that you will have to do a rename so that all the .toggle-IDs correspond to the ID+info-bits.
Untested, but it should work.