如何使列表项显示/隐藏另一个DIV？

Question

我有2个名单：

·源选择器; · ·所选来源的内容;

我需要知道如何将源列表中的每个项目转换为按钮，仅在单击时显示其内容，并在选中时保持突出显示，就像iTunes智能播放列表（例如）一样。

有人可以为我制作此代码吗？我已经有了jQuery，但我无法让它工作......

#tabs {
	z-index: 1;
	top: 60px;
	height: 576px;
	width: 244px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
	padding-top: 5px;
	float: left;
	overflow: scroll;
	max-height: 591px;
	left: -40px;
    outline: dotted;
	}	


#Source {
	height: 656px;
	width: 244px;
	background: #EEE;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
    outline: dotted;
	}



#content {
	height: 300px;
	width: 500px;
	text-align:right;
	overflow-y: scroll;
	text-align:center;
    outline: dotted;

	}	

.list {
	font-family: sans-serif;
	margin: auto;
	width: 300px;
	font-size: 12px;
	max-height: 654px;
	padding-top: 30px;
}
.list > li {
  display:block;
  float: left;
  padding: 12px;
  line-height: 15px;

 }
  
#tabs > li {
  display:block;
  float: bottom;
  padding: 3px;
  padding-left: 13px;
  line-height: 15px;
  
}  

<div id="content">

  <div id="MRV">
    <ul class="list" id:"mrv">
       <li>
        <div id="thumb"><img src="lib/mrv/MRV-40x30_01.png" width="100px" height="75"/></div>
        <br>	
	    <p class="ref">MRV 1</p>
        <h3 class="empresa">MRV Engenharia</h3>
        <p class="tags"><!-- Atenção Uso Obrigatório de Capacetes e Calçados de Segurança --></p>
      </li>
   </ul>
  </div>
  </div>
  
<div id="source">
  <ul id="tabs">
    <li>
<img src="" width="32px" height="32px" img class="avatar"/> 	Ambev
</li>

<li>
<img src="" width="32px" height="32px" img class="avatar"/>	Bianchini
</li>

<li>
<img src="" width="32px" height="32px" img class="avatar"/>	MRV Engenharia
</li>

<li>
<img src="" width="32px" height="32px" img class="avatar"/>	White Martins
</li>

</ul>