Hello,

I am using the following css

..hiddenDiv2 {
display: none;
}

..visibleDiv2{
display: inline;
}

which works fine after one of the first set of mypitch1 and
notmypitch1 images has been clicked, in that the titles and images for
Tests 2, 3 and 4 all appear in the same place on the page.

After Test 1 though Test 2 appears lower down the page - how can I get
all 4 sets in the same position?

Cheers

Geoff

<div id="test1" class="visibleDiv2">
<h3>Test 1:</h3>
<IMG alt="image" id="a10" src="../assets/images/play1.gif"
onclick="musicSelect(this);">
</div>
<div id="test11" class="hiddenDiv2">
<IMG alt="image" id="a11" src="../assets/images/mypitch1.gif"
onclick="checkThisFirst(this);">
<IMG alt="image" id="a12" src="../assets/images/notmypitch1.gif"
onclick="checkThisSecond(this);">
</div>

<div id="test2" class="hiddenDiv2">
<h3><em>Test 2:</em></h3>
<IMG alt="image" id="a20" src="../assets/images/play1.gif"
onclick="musicSelect(this);">
</div>
<div id="test21" class="hiddenDiv2">
<IMG alt="image" id="a21" src="../assets/images/mypitch1.gif"
onclick="checkThisFirst(this);">
<IMG alt="image" id="a22" src="../assets/images/notmypitch1.gif"
onclick="checkThisSecond(this);">
</div>

<div id="test3" class="hiddenDiv2">
<h3>Test 3:</h3><IMG alt="image" id="a30"
src="../assets/images/play1.gif" onclick="musicSelect(this);">
</div>
<div id="test31" class="hiddenDiv2">
<IMG alt="image" id="a31" src="../assets/images/mypitch1.gif"
onclick="checkThisFirst(this);">
<IMG alt="image" id="a32" src="../assets/images/notmypitch1.gif"
onclick="checkThisSecond(this);">
</div>