how to do show hide for multiple classes
<p>i have did the code for one category so i need to do same thing for another categories using with same code... can suggest any shortest format for using multiple category containers.</p>

<p>ex: my symbols is one category so i need to do the such a way for another category that is "my dollars'</p>

<p>Jquery</p>

<pre><code>$('.my-symbols .show').click(function(){
 $('.my-symbols .container').show(500);
 });
 $('.my-symbols .hide').click(function(){
 $('.my-symbols .container').hide(300);
 });
</code></pre>

<p>css</p>

<pre><code>#charts .my-symbols{
width:59%;
float:left;
margin-left:0.5%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background:#666666;
padding:0.5%;
}
#charts .my-symbols .show{
width:10px;
height:10px;
background:url(../../images/blockopen.png) no-repeat;
float:right;
/*padding:10px 10px 10px 10px;*/
border:none;
top:-10px;
padding:10px 10px 10px 10px;
position:relative;
}
#charts .my-symbols .hide{
width:10px;
height:10px;
background:url(../../images/blockclose.png) no-repeat;
position:relative;
top:0;
right:0;
float:right;
padding:10px 10px 10px 10px;
border:none;
} 
#charts .my-symbols .container{
display:none;
position:absolute;
padding:1%;
background:#454545;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
z-index:1;
}
</code></pre>
