I need assistance with a custom tab module. I'm very new to creating custom modules.

[gramirez]

I'm trying to create a custom "TAB" module (Product - Featured Tabs v2 - TEST) that has a feature available for each tab title category, which will allow me to add "multiple rows" of content (text block and image) inside of each tab title category and the ability to toggle the image on the left side or the right side. Each tab title category should have it's own unique content.

See this screenshot to see what we are currently getting:
A) Current page is not showing the Row Contents.jpg

See this screenshot "mockup image"to see what it is we would like to see:
B) In this mockup image I show what we need - the Row Content stacked below and left to right image.jpg

Here is a link to the page:
https://go.socialstudies.com/new-edition-elementary-atlases-gr

 

 @alyssamwilie 

[alyssamwilie · Accepted solution]

@gramirez It looks like it's in a file called s2_script. I believe if you just change all the references to .bundle-tabcontent to .bundle-tabrow instead that should fix it.

[gramirez]

@webdew Thank you so much for sharing this! This will help me to see better how a tabbed module is constructed in code. I really appreciate this!👍

[webdew · Accepted solution]

Hi @gramirez ,

In hubspot we can easily create the tabbing module. you can use this code for tabbing https://codepen.io/cssjockey/pen/jGzuK . After that you have to create the edit fields according to you requirements.

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards. 

[alyssamwilie]

@gramirez Looking at the webpage your .bundle-tabcontent have a style of display: none set on them inline. It 's likely an issue with your javascript.

[gramirez]

@alyssamwilie Thank you so much for your reply. Is there something else I can share on here that would help, like the javascript code? If so, I'm not sure where to find that.

[alyssamwilie · Accepted solution]

@gramirez It looks like it's in a file called s2_script. I believe if you just change all the references to .bundle-tabcontent to .bundle-tabrow instead that should fix it.

[gramirez]

@dennisedson
Thanks for the reply! I've attached some code as well as more screenshots. Hope this helps. Thanks!
@piersg 

__________________________________________________________________________

<!-- Here is the module (Produt - Featured Tabs v2 - TEST) HTML -->
__________________________________________________________________________

<div class="bundle-tablisting">
{% for item in module.feature_tabs %}

<!-- -->
<div class="bundle-tabrow">
<a href="#" class="bundle-tablink">{{ item.tab_main_title }}</a>

{% for rowContent in item.row_contents %}
<div class="bundle-tabcontent">

<div class="bundle-lefttext"> <!-- Left -->
<h4>{{ rowContent.tab_sub_title }}</h4>
<div class="bundle-text">{{ rowContent.tab_text }}</div>
</div>

<div class="bundle-rightimg"> <!-- Right -->
{% if rowContent.feature_image.src %}
<img src="{{ rowContent.feature_image.src }}" alt="{{ rowContent.feature_image.alt }}" width="{{ rowContent.feature_image.width }}" height="{{ rowContent.feature_image.height }}">
{% endif %}
</div>

</div>
{% endfor %}

<!-- Original
<div class="bundle-tabcontent">
<div class="bundle-lefttext">
<h4>{ item.tab_sub_title }}</h4>
<div class="bundle-text">{ item.tab_text }}</div>
</div>
<div class="bundle-rightimg">
% if item.feature_image.src %}
<img src="{ item.feature_image.src }}" alt="{ item.feature_image.alt }}" width="{ item.feature_image.width }}" height="{ item.feature_image.height }}">
% endif %}
</div>
</div>
-->

</div>
<!-- -->

{% endfor %}
</div>

__________________________________________________________________________

<!-- Here is the module (Produt - Featured Tabs v2 - TEST) CSS -->
__________________________________________________________________________

.tablisting-v2 {
border-bottom: 2px solid #00b7b9;
padding-bottom: 24px;
}
.tablisting-v2 .bundle-tablinkrow {
border-bottom: 2px solid #00b7ba;
text-align: center;
}
.tablisting-v2.bundle-tablisting a.bundle-tablink:after,
.tablisting-v2 .bundle-tablinkrow a.bundle-tablink::after {
border-bottom-color: #00b7ba !important;
}
.tablisting-v2 .bundle-tablisting a.bundle-tablink,
.tablisting-v2 .bundle-tablinkrow a.bundle-tablink {
display: inline-block;
float: none !important;
}
.tablisting-v2 .bundle-tabcontent .bundle-rightimg {
text-align: right !important;
}
.tablisting-v2 .bundle-tabcontent .bundle-rightimg img {
max-width: 350px;
width: 100% !important;
}

@media screen and (max-width: 1024px) {
.tablisting-v2 .bundle-tablinkrow {
text-align: left;
}
.tablisting-v2 .bundle-tablisting a.bundle-tablink, .tablisting-v2 .bundle-tablinkrow a.bundle-tablink {
float: left !important;
}
.tablisting-v2 .bundle-tablisting a.bundle-tablink,
.tablisting-v2 .bundle-tablinkrow a.bundle-tablink {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 16px !important;
}
}
@media screen and (max-width: 991px) {
.tablisting-v2 .bundle-tabcontent .bundle-rightimg {
padding-left: 15px !important;
padding-right: 15px !important;
}
}
@media screen and (max-width:767px) {
.tablisting-v2 {
border-bottom: 0;
padding-bottom: 0;
}
.tablisting-v2 .bundle-tabcontent .bundle-rightimg {
text-align: center !important;
}
}

 

 

 

 

[dennisedson]

@gramirez 👋

Might be helpful to add the code you already have set up. 

@piersg  might have some tips here