Expanding text inside fixed-position divs

Question

I'm having problems at the moment with expanding and collapsing sections using JQuery; the fixed position div won't let me change what's viewed in certain browsers.

It seemed to work fine previously when I didn't have the mainBlock and titleBlock divs, and if I remove the fixed position line the problem goes away, but then my divs aren't laid out how I'd like them to be.

As I said previously this is only a problem in some browsers: it seems to work fine in Firefox, but not in Chrome or IE. I'm unsure What I'd need to change for each browser to make it work (also seems to work fine in JSfiddle )

JavaScript:

jQuery(document).ready(function () {

    $(".collapse").click(function () {
        $(this).next().toggle();
        $(this).find('span').toggleClass("ui-icon-triangle-1-s");
    }).next().hide();

});

CSS:

.collapse span {
    display:inline-block;
    }
#titleBlock {
    position: fixed;
    right: 10px;
    left: 10px;
    top:10px;
    height: 90px;
    z-index: 0;
}
#mainBlock {
    position: fixed;
    right: 10px;
    left: 10px;
    top:110px;
    bottom: 10px;
    overflow-y: scroll;
    z-index: -1;
}

HTML:

<div id="titleBlock">
    <h1>Title</h1>
    <h2>Author <span style="float:right;">DD/MM/YYYY</span></h2>
</div>

<div id="mainBlock">

<h2 id="S1">Section 1</h2>
<p>Non-hidden text</p>

<h2 id="S1_1" class="collapse"><span class="ui-icon ui-icon-triangle-1-e"></span>Section 1.1</h2>
<p>Hidden Text </p>

</div>

Answer 1

Seems that the z-index was causing the problems.

#titleBlock {
    position: fixed;
    right: 10px;
    left: 10px;
    top:10px;
    height: 90px;
    z-index: 0;
}
#mainBlock {
    position: fixed;
    right: 10px;
    left: 10px;
    top:110px;
    bottom: 10px;
    overflow-y: scroll;
    z-index: 1;
}

Because the mainBlock was int he background I couldn't cliok it.