Tab Menu

[Shaykoo]

Hi, I have a tab module in my template and I need to switch tab colors upon clicking. For example if I have 2 tabs and if I click on first tab then the background color of the tab would change leaving other tab with different color and vice versa. I already gave both of them particular IDs and wrote a Jquery(But I don't know where to clace it). Jquery code:

<script type="text/javascript">// <![CDATA[
$(document).ready(function){

$("#btn1").bind('click', function(event){

$("#btn1").css({'background-color': '#ff3366', 'color':'#fff'});
$("#btn2").css({'background-color': 'd5e2e9', 'color':'#000'});
});
});

$(document).ready(function(){
$("#btn2").bind('click', function(event){

$("#btn1").css({'background-color': 'd5e2e9', 'color':'#000'});
$("#btn2").css({'background-color': '#ff3366', 'color':'#fff'});

});
})
// ]]></script>

this is the preview link of the page where there are 2 tabs in the hero section:
https://www.fylehq.com/pricingfyle?hs_preview=AIyVvSBm-6647959624

Thanks In Advance

[Kevin-C · Accepted solution]

@Shaykoo

There are a number of ways to attached JS and other ancillary files to you template. Specifically for JS there are 2 options in the "Edit" panel of the design tools.

See the image below.