JSFiddle - React, Tailwind, and code Playground
HTML
<div class="pro3a">
<button type="submit" id="related-btn" title="Vis relaterte produkter" value="">{t _recommended}</button>
</div>
<div id="show-hide">
<div id="relatedProducts">
{foreach from=$related item=group}
{if $group.0.ProductRelationshipGroup.name_lang}
<h3>{$group.0.ProductRelationshipGroup.name_lang}</h3>
{/if}
{include file="category/productList.tpl" products=$group}
{/foreach}
</div>
</div>
</div>
CSS
.pro3a {
padding:0px;
margin-top:10px;
margin-left:18px;
color:#3B88CB;
font-size: 16px;
font-weight: thinner;
white-space: nowrap;
display: block;
}
#show-hide
{
display:none;
margin: 0;
padding: 0;
clear:both;
}
#show-hide .highlighted
{
display:block;
margin: 0;
padding: 0;
clear:both;
}
#related-btn
{
margin: 0;
padding: 0;
background-image: url(../../upload/down_chev.png);
background-repeat:no-repeat;
background-position: right;
background-color:#ffffff;
padding-right: 20px;
border:none;
overflow:hidden;
outline:none;
white-space: nowrap;
height:30px;
cursor:pointer;
display:block;
color:#3B88CB;
font-size: 16px;
}
#related-btn:hover
{
margin: 0;
padding: 0;
background-image: url(../../upload/down_chev.png);
background-repeat:no-repeat;
background-position: right;
background-color:#ffffff;
padding-right: 20px;
border:none;
overflow:hidden;
outline:none;
white-space: nowrap;
height:30px;
cursor:pointer;
display:block;
color:#333;
font-size: 16px;
}
.chev-up
{
/*background-image: url(../../upload/down_chev.png) !important;*/
color: #00f;
}
JavaScript
$(function() {
$("#related-btn").click(function() {
$("#show-hide").toggle("slow");
});
});
$(function() {
$("#related-btn").click(function() {
$("this").toggleClass("chev-up");
});
});