javascript - How to make a list item show/hide another DIV? -


i have 2 lists:

· source selector; · · content of selected source;

i need know how turn each item of source list button, show it's content when clicked, , stay highlighted when selected, itunes smart playlists (for example).

someone can make code me? have jquery already, can't make work...

#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>                


Comments

Popular posts from this blog

php - Zend Framework / Skeleton-Application / Composer install issue -

c# - Better 64-bit byte array hash -

python - PyCharm Type error Message -