I don't know if I do get it, but is it kind of like this...
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.hiden-content
{
display:none;
margin: 0;
padding: 0;
clear:both;
}
.hiden-content .highlighted
{
display:block;
margin: 0;
padding: 0;
clear:both;
}
.subshow-hide
{
overflow:hidden;
cursor:pointer;
display:block;
}
.subhiden-content
{
display:none;
margin: 0;
padding: 0;
clear:both;
}
.subhiden-content .highlighted
{
display:block;
margin: 0;
padding: 0;
clear:both;
}
.subshow-hide
{
overflow:hidden;
cursor:pointer;
display:block;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
var shown;
var subshown;
$(function() {
$(".show-hide").hover(function() {
if(!$(this).data('pinned'))
$(this).next().toggle("fast");
});
$(".show-hide").click(function() {
if(shown){shown.toggle()
}
$(this).data('pinned', !$(this).data('pinned'));
shown=$(this).next();
});
$(".subshow-hide").hover(function() {
if(!$(this).data('pinned'))
$(this).next().toggle("fast");
});
$(".subshow-hide").click(function() {
if(subshown){subshown.toggle()}
$(this).data('pinned', !$(this).data('pinned'));
subshown=$(this).next();
});
});
</script>
</head>
<body>
<div id="page-rap">
<div id="popover">
<a href="#" class="show-hide" title="Cross-References">a</a>
<div class="hiden-content">
<ul>
<li>
<a href="#" class="subshow-hide">Psalms 1:3</a>
<div class="subhiden-content">
<h1>Psalms 1:3</h1>
<p>"Blah blah blah ... "</p>
</div>
</li>
<li>
<a href="#" class="subshow-hide">Genesis 22:5</a>
<div class="subhiden-content">
<h1>Genesis 22:5</h1>
<p>"Blah blah blah ... "</p>
</div>
</li>
<li>
<a href="#" class="subshow-hide">Ezekial 4:11</a>
<div class="subhiden-content">
<h1>Ezekial 4:11</h1>
<p>"Blah blah blah ... "</p>
</div>
</li>
<li>
<a href="#" class="subshow-hide">Job 11:27</a>
<div class="subhiden-content">
<h1>Job 11:27</h1>
<p>"Blah blah blah ... "</p>
</div>
</li>
</ul>
</div>
<a href="#" class="show-hide" title="Cross-References">b</a>
<div class="hiden-content">
<ul>
<li>
<a href="#" class="subshow-hide">Psalms 1:3</a>
<div class="subhiden-content">
<h1>Psalms 1:3</h1>
<p>"Blah blah blah ... "</p>
</div>
</li>
<li>
<a href="#" class="subshow-hide">Genesis 22:5</a>
<div class="subhiden-content2">
<h1>Genesis 22:5</h1>
<p>"Blah blah blah ... "</p>
</div>
</li>
<li>
<a href="#" class="subshow-hide">Ezekial 4:11</a>
<div class="subhiden-content">
<h1>Ezekial 4:11</h1>
<p>"Blah blah blah ... "</p>
</div>
</li>
<li>
<a href="#" class="subshow-hide">Job 11:27</a>
<div class="subhiden-content">
<h1>Job 11:27</h1>
<p>"Blah blah blah ... "</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>