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

Highlighted
Regular Contributor

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

 

Screen Shot 2020-08-10 at 10.18.38 AM.png
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>

0 Upvotes
3 Replies 3
Highlighted
Community Manager

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! 

Thanks,

Dennis


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!
Highlighted
Regular Contributor

I think I got this, thanks for your reply!

Highlighted
Community Manager

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 Robot wink

Thanks,

Dennis


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!
0 Upvotes