How to display product tab content onclick on button

I had displayed product tabs on category page with good look & feel but i got one problem like all tabs content displayed one by one in listing manner. So I want display that tab content only on onclick of that particular link otherwise active link content will show. I have tried following hooks & css for displaying product tabs on category page.

 .woocommerce-tabs ul.tabs{
list-style:none;
overflow:hidden;
position:relative;
margin:0 ;/*0 1.618em*/
padding:0;
}

 .woocommerce-tabs ul.tabs li {
background: #EFEFEF;
display:inline-block;
position:relative;
z-index:0;
margin:0;
}

 .woocommerce-tabs ul.tabs li.active{
    border-color:#78c8ce;
}
.woocommerce-tabs ul.tabs li a {
display:inline-block;
font-weight:600;
color:#606060;
text-decoration:none;
font-size:12px;
padding:10px 20px;
text-transform: uppercase;
}

.woocommerce-tabs ul.tabs li a:hover{
text-decoration:none;
color:#7a7a7a;
}
.noreviews a{color:#78c8ce;}
 .woocommerce-tabs ul.tabs li.active {
background-color:#78c8ce;
z-index:2;color:#FFF;
border-bottom-color:#78c8ce;
border-top-left-radius: 2px;
border-top-right-radius: 2px;

}

.woocommerce-tabs ul.tabs li.active a{
color:inherit;
text-shadow:inherit;
}

#rating_chzn{display: none;}
 .woocommerce-tabs ul.tabs:before{
position:absolute;
content:" ";
width:100%;
bottom:0;
left:0;
border-bottom:1px solid #EFEFEF;
z-index:1;
}

 .woocommerce-tabs .panel {
margin:0 0 2em;
padding:15px 0;
}

 .woocommerce-tabs .accordion-group.panel{
    padding:0;
    margin:0;
    display: block !important;
}

add_action('woocommerce_after_shop_loop_item', 'woocommerce_output_product_data_tabs', 20);

Please suggest any solution for that problem. also i have attached screen shot of that page. 1st tab content 3rd tab content etc.......

via Chebli Mohamed