jQuery hide/show div working in Opera and Chrome but not IE/Firefox

Question

Hey guys, the following snippet of jQuery code seems to work fine in Google Chrome and Opera, but nothing happens when I try hiding/showing the related div in Internet Explorer or Firefox. Any ideas?

$(function() {
  $(".paste-meta-small .right a.collapse").click(function(event) {
    $(this).parents(".paste-meta-small").next(".highlight").toggle(500);
    $(this).text($(this).text() == 'show' ? 'hide' : 'show');
    event.preventDefault();
  })
})

$(function() {
  $(".highlight-meta a.blog-collapse").click(function(event) {
    $(this).parents(".highlight-meta").next(".blog-highlight").toggle(500);
    $(this).text($(this).text() == 'show' ? 'hide' : 'show');
    var margin = ($(this).text() == "show" ? "15px" : "0");
    $(this).parents(".highlight-meta").css("margin-bottom", margin);   
    event.preventDefault();
  })
})

A working example can be found here

Thanks in advance

Answer 1

Your problem is in the script tags up top:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" />
<script src="/js/injekt.js" type="text/javascript"></script>

The second tag isn't loading in the other browsers, <script> tags always need a closing tag, they can't be self-closing:

<script></script> //Valid
<script /> //Invalid

Change the first tag to this to make it work:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;