Question

Here’s my code:

<script type="text/javascript">
    $(document).ready(function () {
        $("[class^=\"hide\"]").hide();
    });
</script>

<div class="hide1">Hide</div>
<div class="show1">Show</div>
<div class="hide2">Hide</div>
<div class="show2">Show</div>
<div class="hide3">Hide</div>
<div class="show3">Show</div>
<div class="hide4">Hide</div>
<div class="show4">Show</div>

But on page load, the hide divs are still visible… what am I doing wrong?

Answer 1

Wow… I feel so stupid. I spent so much time banging my head against a wall, and only discover the solution after I post here…

So turns out I was doing everything correctly, but the divs were in a View (I’m using MVC3) that was being loaded after $(document).ready was being called. Moving the code into the View solved the problem.