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

SOLVE
gramirez
Contributor

I'm trying to create a custom "TAB" module (Product - Featured Tabs v2 - TESTthat 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

A) Current page is not showing the Row Contents.jpg


B) In this mockup image I show what we need - the Row Content stacked below and left to right image.jpg

@amwilie 

0 Upvotes
2 Accepted solutions

Accepted Solutions
amwilie
Solution
Key Advisor | Elite Partner

@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.

border

Alyssa Wilie

Web Developer at LyntonWeb

If this answer solved your question, please mark it as the solution!

View solution in original post

webdew
Solution
Top Contributor | Diamond Partner

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. 

View solution in original post

7 Replies 7
dennisedson
Community Manager

@gramirez 👋

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

@piersg  might have some tips here

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
gramirez
Contributor

@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;
}
}



Here is the template (Product - Featured Tabs v2 - TEST).png

 

Here is the template (Product - Featured Tabs v2 - TEST) with the module selected.png

 

Here is the module (Produt - Featured Tabs v2 - TEST) HTML.png

 

Here is the module (Produt - Featured Tabs v2 - TEST) CSS.png

 

amwilie
Key Advisor | Elite Partner

@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.

border

Alyssa Wilie

Web Developer at LyntonWeb

If this answer solved your question, please mark it as the solution!

gramirez
Contributor

@amwilie 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.

amwilie
Solution
Key Advisor | Elite Partner

@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.

border

Alyssa Wilie

Web Developer at LyntonWeb

If this answer solved your question, please mark it as the solution!

View solution in original post

webdew
Solution
Top Contributor | Diamond Partner

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. 

View solution in original post

gramirez
Contributor

@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!👍