Switching tab colors upon clicking


#1

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:

this is the preview link of the page where there are 2 tabs in the hero section:

Thanks In Advance


#3

Hi @Abhishek_Sharma, the CMS Development forum might be a better place for your question here: https://community.hubspot.com/t5/CMS-Development/bd-p/designers_support, but normally something like this is done by using a class of active on a clicked item. You've already got your JS working there, so really this is a CSS problem. Adding this code in the dev tools works for me, so you could try adding this to your main CSS file, but it'd probably be best to not use !important, and to refactor your CSS:

a.tab-link.active span {
    background: #ff3366;
    color: white!important;
}

a.tab-link span {
    background: white;
    color: #8b8391!important;
}

#4

Thanks @Connor_Barley , this worked for me really well. Thanks a lot again. :slight_smile:


#5

Hey @Connor_Barley , but in mobile tabs are not showing only the tab content is there. URL: https://www.fylehq.com/pricingfyle?hs_preview=AIyVvSBm-6647959624#


#6

Hi @Abhishek_Sharma, looks like you're hiding those buttons on purpose -- http://prntscr.com/lwjjw1


#7

@Connor_Barley but in hubspot we can't change the html , is there any class where I need to look for the visibility of tabs


#8

Hey, I tried this

 @media (max-width: {{ media_sm }}px) {

.tabs-container.responsive .tabs-nav .duplicate {
    display: none;
}

.tabs-container.responsive .tab-link.mirror {
    display: block;
}

}

and tabs are showing up but the second tab is coming at the bottom of the first tab content


#9

Hi @Abhishek_Sharma, I'm honestly not sure the best way to fix this. This is a quite complex template set that you're making lots of edits to. I'm not seeing the items appear as the active class is not added to the tabs. Marketplace templates are tricky since some of them are incredibly complex and aren't meant to really be customized too much. The CSS and JS here honestly needs to be completely refactored


#10

@Connor_Barley es, but now the content is not showing up in the mobile screen . Preview: https://www.fylehq.com/pricingfyle?hs_preview=AIyVvSBm-6647959624


#12

Hi @Abhishek_Sharma, the issue is that on mobile, the active class is not being added to the divs, so nothing is appearing in their place. You'll need to write some Jquery to add the active class to that section when clicking those buttons, or you'll need to refactor the way your modules are set up on the page


#13