Jquery tabs and IE8

Question

hi, i am using jquery to create the following using this code

 <script>
  $(document).ready(function() {
    $("#content").tabs({ fx: { opacity: 'toggle' } });
  });
</script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#documents").tabs({ fx: { opacity: 'toggle' } });
  });
</script>

Here it is in firefox working like in every other browser like this:

but in IE 8 ... it does this but in 7 its fine.

I think it is somethin to do with the script opacity but i cant get it to work. does any one have any idea.

Cheers

Answer 1

I see that you got it working by fixing the jQuery/UI reference, but just as a note, you can have multiple code blocks inside a single <script> tag, like this:

<script type="text/javascript">
  $(document).ready(function() {
    $("#content").tabs({ fx: { opacity: 'toggle' } });
  });
  $(document).ready(function() {
    $("#documents").tabs({ fx: { opacity: 'toggle' } });
  });
</script>

Also, you can run as much as you want inside any document.ready, like this:

<script type="text/javascript">
  $(document).ready(function() {
    $("#content").tabs({ fx: { opacity: 'toggle' } });
    $("#documents").tabs({ fx: { opacity: 'toggle' } });
  });
</script>

And last, you can have use the multiple selector to reduce the code even further, like this:

<script type="text/javascript">
  $(function() { //shortcut for $(document).ready(function() {
    $("#content, #documents").tabs({ fx: { opacity: 'toggle' } });
  });
</script>