SO - 16811536

HTML

<div style="position: relative; float: left; margin-right: 50px">

  <h1>Group Title</h1>
	
	<ul>
	  <li>
      <h2 class="trigger">Sub Title</h2>
      <ol class="show">
			  <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
			</ol>
		</li>
	  <li>
      <h2 class="trigger">Sub Title</h2>
      <ol class="show">
			  <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
			</ol>
		</li>
	  <li>
      <h2 class="trigger">Sub Title</h2>
      <ol class="show">
			  <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
			</ol>
		</li>    
	</ul>
  
</div>

<div style="position: relative; float:left">

  <h1>Group Title</h1>
	
	<ul>
	  <li>
      <h2 class="trigger">Sub Title</h2>
      <ol class="show">
			  <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
			</ol>
		</li>
	  <li>
      <h2 class="trigger">Sub Title</h2>
      <ol class="show">
			  <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
			</ol>
		</li>
	  <li>
      <h2 class="trigger">Sub Title</h2>
      <ol class="show">
			  <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
			</ol>
		</li>    
	</ul>
  
</div>

CSS

.show {
    display:none;
    background: lightgrey;
    width: 100%;
    position: absolute;
    top: 30px;
    left:0;
}

JavaScript

$('.trigger').click(function (e) {
    e.stopPropagation();
    $('.show').hide();    
    $(this).next('.show').slideDown();
});

$(document).click(function () {
    $('.show').slideUp();    
});