I need help creating this behavior. Clicking on a category and making different content appear.

[gramirez]

I need help creating this behavior. (see attached)
I need to have the ability to click on one of 7 categories in the Hero section and have it show the corresponding Logo & Content inside the tabber. (Each category will have it's own set of tabs that will use the same layout.) Here is the page link:
https://go.socialstudies.com/microcredentials-0

This is the code I currently have for one section. (It needs to be hard coded for now)

<!-- ************ Embedded CSS ************ -->
<style>

.tabber_content_columns {
display: flex;
flex-wrap: wrap;
}
.thumb_prod_image {
width: 20%;
float: left;
}

.tabber_product_title {
font-size: 18px;
font-weight: bold;
}

.tabber_product_code {
font-size: 12px;
line-height: 25px;
}
.tabber_product_location {
font-size: 12px;
}

div.right-side-text {
float: initial;
margin-left: 110px;
}

.tab-pane .row-fluid {
padding: 32px 40px 0px 40px;
}

</style>

<!-- ************ TABBER WRAPPER ************ -->
<div class="tabber-wrap blog-tabber">

<!-- ************ TABBER TABS ************ -->
<ul class="clearfix tabber-tabs">
<li class="active"><a href="#tab-1">Trifold Set</a></li>
<li><a href="#tab-2">Extra Flyers</a></li>
<li><a href="#tab-3">Landing Pages</a></li>
<li><a href="#tab-4">Videos</a></li>
</ul>
<!-- ************ TABS 1-4 CONTENT ************ -->
<div class="tabber-content">

<!--TAB 1-->
<div class="tab-pane active" id="tab-1">

<!-- ************ ROW 1 ************ -->
<div class="row-fluid">
<!-- Left Column -->
<div class="span6 left-tab-col">
<!-- Image -->
<div style="flex-basis: 50%;"><img class="thumb_prod_image"
src="https://go.socialstudies.com/hubfs/Marketing%20Collateral%20Digital%20Catolog/Active%20Classroom%20C...">
</div>
<!-- Text -->
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">Grade 5 License</div>
<div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLL1</div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active
Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FLL_License Specific Flyers\MKTAC-FLL1_Grade 5
License\3Export\z_old</div>
</div>
</div>
<!-- Right Column -->
<div class="span6 right-tab-col">
<!-- Image -->
<div style="flex-basis: 50%;"><img class="thumb_prod_image"
src="https://go.socialstudies.com/hubfs/Marketing%20Collateral%20Digital%20Catolog/Active%20Classroom%20C...">
</div>
<!-- Text -->
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">Grade 6 License</div>
<div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLL2</div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active
Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FLL_License Specific Flyers\MKTAC-FLL2_Grade 6
License\3Export\z_old</div>
</div>
</div>
</div>
<!-- ************ ROW 2 ************ -->
<div class="row-fluid">
<!-- Left Column -->
<div class="span6 left-tab-col">
<!-- Image -->
<div style="flex-basis: 50%;"><img class="thumb_prod_image"
src="https://f.hubspotusercontent30.net/hubfs/3377481/Marketing%20Collateral%20Digital%20Catolog/Active%2...">
</div>
<!-- Text -->
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">US History License</div>
<div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLL3</div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FLL_License Specific Flyers\MKTAC-FLL3_US History License\3Export</div>
</div>
</div>
<!-- Right Column -->
<div class="span6 right-tab-col">
<!-- Image -->
<div style="flex-basis: 50%;"><img class="thumb_prod_image"
src="https://f.hubspotusercontent30.net/hubfs/3377481/Marketing%20Collateral%20Digital%20Catolog/Active%2...">
</div>
<!-- Text -->
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">World History License</div>
<div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLL4</div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FLL_License Specific Flyers\MKTAC-FLL4_World History License\3Export</div>
</div>
</div>
</div>
<!-- ************ ROW 3 ************ -->
<div class="row-fluid">
<!-- Left Column -->
<div class="span6 left-tab-col">
<!-- Image -->
<div style="flex-basis: 50%;"><img class="thumb_prod_image"
src="https://f.hubspotusercontent30.net/hubfs/3377481/Marketing%20Collateral%20Digital%20Catolog/Active%2...">
</div>
<!-- Text -->
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">Gvt &amp; Civics License</div>
<div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLL5</div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FLL_License Specific Flyers\MKTAC-FLL5_Gvt & Civics License\3Export</div>
</div>
</div>
<!-- Right Column -->
<div class="span6 right-tab-col">
<!-- Image -->
<div style="flex-basis: 50%;"><img class="thumb_prod_image"
src="https://f.hubspotusercontent30.net/hubfs/3377481/Marketing%20Collateral%20Digital%20Catolog/Active%2...">
</div>
<!-- Text -->
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">Geography License</div>
<div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLL6</div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FLL_License Specific Flyers\MKTAC-FLL6_Geography License\3Export</div>
</div>
</div>
</div>
<!-- ************ ROW 4 ************ -->
<div class="row-fluid">
<!-- Left Column -->
<div class="span6 left-tab-col">
<!-- Image -->
<div style="flex-basis: 50%;"><img class="thumb_prod_image"
src="https://f.hubspotusercontent30.net/hubfs/3377481/Marketing%20Collateral%20Digital%20Catolog/Active%2...">
</div>
<!-- Text -->
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">Economics License</div>
<div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLL7</div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FLL_License Specific Flyers\MKTAC-FLL7_Economics License\3Export</div>
</div>
</div>
<!-- Right Column -->
<div class="span6 right-tab-col">
<!-- Image -->
<div style="flex-basis: 50%;"><img class="thumb_prod_image"
src="https://f.hubspotusercontent30.net/hubfs/3377481/Marketing%20Collateral%20Digital%20Catolog/Active%2...">
</div>
<!-- Text -->
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">Current Events</div>
<div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLCE</div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FLCE_Current Events Flyer\3Export</div>
</div>
</div>
</div>
<!-- ************ ROW 5 ************ -->
<div class="row-fluid">
<!-- Left Column -->
<div class="span6 left-tab-col">
<!-- Image -->
<div style="flex-basis: 50%;"><img class="thumb_prod_image"
src="https://f.hubspotusercontent30.net/hubfs/3377481/Marketing%20Collateral%20Digital%20Catolog/Active%2...">
</div>
<!-- Text -->
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">Economics Collections List</div>
<div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLECN</div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FL_Subject specific flyers\MKTAC-FLECN_Economics Collection List\3Exports</div>
</div>
</div>
<!-- Right Column -->
<div class="span6 right-tab-col">
<!-- Image -->
<div style="flex-basis: 50%;"><img class="thumb_prod_image"
src="https://f.hubspotusercontent30.net/hubfs/3377481/Marketing%20Collateral%20Digital%20Catolog/Active%2...">
</div>
<!-- Text -->
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">Geo &amp; Global Studies Collections List</div>
<div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLGEO</div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FL_Subject specific flyers\MKTAC-FLGEO_Geo and Global Studies Collection List\3Export</div>
</div>
</div>
</div>
<!-- ************ ROW 6 ************ -->
<div class="row-fluid">
<!-- Left Column -->
<div class="span6 left-tab-col">
<!-- Image -->
<div style="flex-basis: 50%;"><img class="thumb_prod_image"
src="https://f.hubspotusercontent30.net/hubfs/3377481/Marketing%20Collateral%20Digital%20Catolog/Active%2...">
</div>
<!-- Text -->
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">Government & Civics Collections List</div>
<div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLGVT</div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FL_Subject specific flyers\MKTAC-FLGVT_Government and Civics collection list\3Export</div>
</div>
</div>
<!-- Right Column -->
<div class="span6 right-tab-col">
<!-- Image -->
<div style="flex-basis: 50%;"><img class="thumb_prod_image"
src="https://f.hubspotusercontent30.net/hubfs/3377481/Marketing%20Collateral%20Digital%20Catolog/Active%2...">
</div>
<!-- Text -->
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">Psychology Collections List</div>
<div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLPSY</div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FL_Subject specific flyers\MKTAC-FLPSY_Psychology Collection List\3Export</div>
</div>
</div>
</div>
<!-- ************ ROW 7 ************ -->
<div class="row-fluid">
<!-- Left Column -->
<div class="span6 left-tab-col">
<!-- Image -->
<div style="flex-basis: 50%;"><img class="thumb_prod_image"
src="https://f.hubspotusercontent30.net/hubfs/3377481/Marketing%20Collateral%20Digital%20Catolog/Active%2...">
</div>
<!-- Text -->
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">US History Collection List</div>
<div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLUS</div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FL_Subject specific flyers\MKTAC-FLUS_US History Collection List\3Export</div>
</div>
</div>
<!-- Right Column -->
<div class="span6 right-tab-col">
<!-- Image -->
<div style="flex-basis: 50%;"><img class="thumb_prod_image"
src="https://f.hubspotusercontent30.net/hubfs/3377481/Marketing%20Collateral%20Digital%20Catolog/Active%2...">
</div>
<!-- Text -->
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">World History Collection List</div>
<div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLWLD</div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FL_Subject specific flyers\MKTAC-FLWRLD_World History Collection List\3Export</div>
</div>
</div>
</div>
<!-- ************ ROW 8 ************ -->
<div class="row-fluid">
<!-- Left Column -->
<div class="span6 left-tab-col">
<!-- Image -->
<div style="flex-basis: 50%;"><img class="thumb_prod_image"
src="https://f.hubspotusercontent30.net/hubfs/3377481/Marketing%20Collateral%20Digital%20Catolog/Active%2...">
</div>
<!-- Text -->
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">US History Skills</div>
<div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLS1</div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FLS_Skill Specific Flyers\MKTAC-FLS1_US History Skills\3Export</div>
</div>
</div>
<!-- Right Column -->
<div class="span6 right-tab-col">
<!-- Image -->
<div style="flex-basis: 50%;"><img class="thumb_prod_image"
src="https://f.hubspotusercontent30.net/hubfs/3377481/Marketing%20Collateral%20Digital%20Catolog/Active%2...">
</div>
<!-- Text -->
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">World History Skills</div>
<div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLS2</div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FLS_Skill Specific Flyers\MKTAC-FLS2_World History Skills\3Export</div>
</div>
</div>
</div>
<!-- ************ ROW 9 ************ -->
<div class="row-fluid">
<!-- Left Column -->
<div class="span6 left-tab-col">
<!-- Image -->
<div style="flex-basis: 50%;"><img class="thumb_prod_image"
src="https://f.hubspotusercontent30.net/hubfs/3377481/Marketing%20Collateral%20Digital%20Catolog/Active%2...">
</div>
<!-- Text -->
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">Geography Skills</div>
<div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLS3</div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FLS_Skill Specific Flyers\MKTAC-FLS3_Geography Skills\3Export</div>
</div>
</div>
<!-- Right Column -->
<div class="span6 right-tab-col">
<!-- Image -->
<div style="flex-basis: 50%;"><img class="thumb_prod_image"
src="https://f.hubspotusercontent30.net/hubfs/3377481/Marketing%20Collateral%20Digital%20Catolog/Active%2...">
</div>
<!-- Text -->
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">Government &amp; Civics Skills</div>
<div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLS4</div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FLS_Skill Specific Flyers\MKTAC-FLS4_Government &amp; Civics Skills\3Export</div>
</div>
</div>
</div>
<!-- ************ ROW 10 ************ -->
<div class="row-fluid">
<!-- Left Column -->
<div class="span6 left-tab-col">
<!-- Image -->
<div style="flex-basis: 50%;"><img class="thumb_prod_image"
src="https://f.hubspotusercontent30.net/hubfs/3377481/Marketing%20Collateral%20Digital%20Catolog/Active%2...">
</div>
<!-- Text -->
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">Economics Skills</div>
<div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLS5</div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FLS_Skill Specific Flyers\MKTAC-FLS5_Economics Skills\3Export</div>
</div>
</div>
<!-- Right Column -->
<!-- <div class="span6 right-tab-col">
<!-- Image
<div style="flex-basis: 50%;"><img class="thumb_prod_image"
src="https://f.hubspotusercontent30.net/hubfs/3377481/Marketing%20Collateral%20Digital%20Catolog/Active%2...">
</div>
<!-- Text
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">Government &amp; Civics Skills</div>
<div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLS4</div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FLS_Skill Specific Flyers\MKTAC-FLS4_Government &amp; Civics Skills\3Export</div>
</div>
</div> -->
</div>


<br>

</div>




</div>

[dennisedson]

Hello @gramirez ,

Just looked at the site and it appears that you are making progress as the  "Young Citizens" nav item is updating the content. 

Do you still need assistance?  

Thanks! 

[gramirez]

I think I got this, thanks for your reply!

[dennisedson]

Cool.  If you are feeling ambitous, you could do a little write up here on how you solved your problem.  May be useful to others down the road