Help with jquery / javascript show and hide function

JavaScript
1

Hi Guys,

Any help would be great!!.

I have set up the kind of function that I want on a two test pages.

http://preview.mysocialsolutions.com.au/test.html was the first page I set up with bare html. When you click the ‘Click Me’ button the hidden field slides down, then there is another button to make the field slide back up.

On the second page I have implemented the html and css based on my current site design. When you click the ‘Contact’ link its meant to slide down the hidden field like the above already does. However, as you can see from the second page when It doesn’t work!! Even tho I think I’m using the same functions as the first test.

Any idea why my second http://preview.mysocialsolutions.com.au/contact_test.html isn’t working.

Thanks

2

Hi,

You are including jQuery twice on your page and the second one is overwriting the first, causing unexpected behaviour.

Remove the old version (1.3) and move your scripts to the bottom of your page, thus:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.tutorialspoint.com/jquery/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript" src="js/jquery.cslider.js"></script>
    <script type="text/javascript" language="javascript">
      $(document).ready(function() {
        $("#hide").click(function([B]e[/B]){
          [B]e.preventDefault();[/B]
          $(".target").hide( "slide", { direction: "up"  }, 2000 );
        });

        $("#show").click(function([B]e[/B]){
          [B]e.preventDefault();[/B]
          $(".target").show( "slide", {direction: "up" }, 2000 );
        });

        $('#da-slider').cslider({         
          autoplay    : true,
          bgincrement : 0,
          interval    : 7000  
        });
      });
    </script> 
  </body>
</html>

Also, notice the inclusion of e.preventDefault() which will prevent the links default action.

3

$(document).ready(function() {});

can be shortened to

$(function() {});

and then since the code is at the bottom of the page where it can run straight away you can then remove the $ from the front to get rid of the microsecond or so wait while it reads the </body></html> tags and the longer delay while it actually tests that those two tags have loaded…