Question: I was trying to test how can I create tabs using materialize, and I was testing this code

```
<div class="row"

<div class="col s12">
  <ul class="tabs">
    <li class="tab col s3"><a href="#test1">Test 1 </a></li>
    <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
    <li class="tab col s3"><a href="#test3">Test 3</a></li>
    <li class="tab col s3"><a href="#test4">Test 4</a></li>
  </ul>
</div>

<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test3" class="col s12">Test 3</div>
<div id="test4" class="col s12">Test 4</div>
</div>

```

The problem is that the content of all divs is always visible as shown in the following figure
[![enter image description here](https://i.stack.imgur.com/xPu9U.jpg)](https://i.stack.imgur.com/xPu9U.jpg)

I did intialize the tabs with this line $('ul.tabs').tabs();

Can you help me to know why am I getting this weird output? Thank you in advance.

Answer: 
I was using jqueryUI in the same project , and this was causing conflict between the jQuery ui and materilizecss. The solution was to build the jquery UI without tabs included. <http://jqueryui.com/download/>
This could be due to the order in which your scripts are being loaded.

If you're using other libraries chances are that `$(document).ready(function() { ...` has been fired before everything else has been completely loaded, instead you should use:

```
$(window).on('load', function() {
  ...
});

```

Also, bear in mind that if your scripts come from a cdn you should be checking for `async` and `defer` attributes.