Customized Tab Section / Dropdown on Mobile

Customized Tab Section / Dropdown on Mobile

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

To add images and text, utilize the page and call the page in the section. Page will be rendered as what you design it.

Please view the demo store here. Password: made4uo

What you are buying:

  • Well designed Tab section
  • Mobile friendly
  • Add any page as content
  • No javascript code

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

To start:

1. From your Admin Page, click Online Store > Themes >Actions > Edit code

2. In the Section folder, add a new section. Name it whatever you want.
3. Replace the default code with the code below. 

<div class="tabComponent {{section.settings.tab_design}}"
style=" --tab-bg: {{section.settings.tab_bg}};
--tab-hover: {{section.settings.tab_hover}};
padding-top: {{ section.settings.padding_top | append: 'px' }};
padding-bottom: {{ section.settings.padding_bottom | append: 'px' }}">

<div class="tabContainer">
{% for block in section.blocks %}
<input class="inputTab" name="tabComponent" type="radio" id="tab--{{ forloop.index }}"
{% if forloop.first %} checked="checked"{% endif %}>
<label class="labelTab" for="tab--{{ forloop.index }}" style="background: {{block.settings.label_bg}};">
<h2> {{block.settings.tab_title}}</h2>
</label>

<div class="infoTab">
<div class="infoTab-container">
{% if block.settings.info_title != blank %}
<h1 class="infoTitle">{{block.settings.info_title}}</h1>
{% endif %}
{% if block.settings.info_description != blank %}
<div class="infoDescription">{{block.settings.info_description}}</div>
{% endif %}
<div class="pageContainer" >{{block.settings.page.content}}</div>
</div>
</div>
{% endfor %}
</div>

<div class="collapsible-tab">
{%- for block in section.blocks -%}
<div class="accordion-collapsible-tab" {{ block.shopify_attributes }}>
<details class="details-collapsible-tab" {% if section.settings.open_first_collapsible_row and forloop.first %} open{% endif %}>
<summary class="summary-collapsible-tab">
<h2 class="accordion-collapsible-tab__title h2">
{{ block.settings.tab_title | default: block.settings.page.title }}
</h2>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-caret"
width="24" height="24"
viewBox="0 0 24 24" fill="none"
stroke="#000000" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M9 18l6-6-6-6"/>
</svg>
</summary>
<div class="accordion-collapsible-tab__content rte" role="region" aria-labelledby="summary-collapsible-tab-{{ block.id }}-{{ section.id }}">
{% if block.settings.info_title != blank %}
<h3>{{ block.settings.info_title }}</h3>
{% endif %}
{% if block.settings.info_description != blank %}
{{ block.settings.info_description }}
{% endif %}

<div class="pageContainer" >{{block.settings.page.content}}</div>
</div>
</details>
</div>
{%- endfor -%}
</div>
</div>
<style>

.tabComponent {
display: flex;
flex-direction: column;
box-sizing: border-box;
position: relative;
-webkit-tap-highlight-color: transparent;
}

.tabContainer {
display: flex;
flex-wrap: wrap;
max-width: 1080px;
width: 100%;
margin: auto;
}

.inputTab {
position: absolute;
opacity: 0;
background: var(--tab-bg);
}

.labelTab {
margin: 0;
padding-right: 5rem;
display: flex;
justify-content: center;
align-items: center;
gap: 2%;
line-height: 1.2;
cursor: pointer;
font-weight: bold;
font-size: clamp(12px, 1.5vw, 24px);
transition: all .3s;
text-align: center;
white-space: nowrap;
overflow: hidden;
}

.labelTab img {
width: clamp(20px, 2.5vw, 50px);
aspect-ratio: 1;
}
.labelTab h2 {
font-size: clamp(14px, 1.5vw, 25px);
display: inline-block;
vertical-align: top;
margin: 0 0 2rem;
}

.infoTab {
display: none;
position: relative;
width: 100%;
padding: 5% 0;
order: 999;
background: var(--tab-bg);
}

.infoTab:before {
content: "";
position: absolute;
width: 100vw;
height: 100%;
background: var(--tab-bg);
top: 0;
left: 50%;
z-index: -1;
transform: translateX(-50%);
}

.inputTab:checked + .labelTab + .infoTab {
display: block;
}

.inputTab:checked + .labelTab > h2:after {
transform: scaleX(1);
}

.labelTab > h2:after {
display: block;
content: '';
width: 100%;
margin-top: 5px;
height: 2px;
background: var(--tab-hover);
transform: scaleX(0);
transition: transform 300ms ease-in-out;
}

.labelTab > h2:hover:after{
transform: scaleX(1);
}

.infoTitle {
font-size: clamp(16px, 2vw, 24px);
}

.infoDescription > *{
font-size: clamp(13px, 1.7vw, 20px);
}

.collapsible-tab {
display: none;
}

.accordion-collapsible-tab .summary-collapsible-tab__title + .icon-caret {
height: calc(var(--font-heading-scale) * 0.6rem);
}

.accordion-collapsible-tab + .accordion-collapsible-tab {
margin-top: 0;
border-top: none;
}

.accordion-collapsible-tab {
margin-top: 2.5rem;
margin-bottom: 0;
border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.accordion-collapsible-tab__title {
display: inline-block;
max-width: calc(100% - 6rem);
margin: auto 0;
word-break: break-word;
}

.accordion-collapsible-tab .icon-accordion {
align-self: center;
fill: rgb(var(--color-foreground));
height: calc(var(--font-heading-scale) * 2rem);
margin-right: calc(var(--font-heading-scale) * 1rem);
width: calc(var(--font-heading-scale) * 2rem);
}

.accordion-collapsible-tab details[open] > summary .icon-caret {
transform: rotate(90deg);
}

.accordion-collapsible-tab summary > .icon-caret {
transform: rotate(0deg);
transition: transform .5s ease;
position: absolute;
height: 1.8rem;
right: 1.5rem;
top: calc(50% - 0.8rem);
}

.accordion-collapsible-tab__content {
word-break: break-word;
overflow-x: auto;
padding: 0rem 1.6rem 2rem;
}

.accordion-collapsible-tab__content img {
max-width: 100%;
}

/* .summary-collapsible-tab --- summary */
.summary-collapsible-tab {
height: 50px;
display: flex;
align-content: center;
}

:root {
--accordion-min-height: 56px;
--accordion-max-height: 300px;
}

.details-collapsible-tab {
padding: 0 2rem;
margin: 0 auto 0.5rem;
border-radius: 4px;
overflow: hidden;
animation-name: accordion-close;
animation-duration: 0.4s;
animation-timing-function: ease-in-out;
transform-origin: top;
}

.details-collapsible-tab[open] {
animation-name: accordion-master;
animation-duration: 0.3s;
animation-timing-function: ease-in-out;
transform-origin: top;
}

@keyframes accordion-master {
from {max-height: var(--accordion-min-height);}
to {max-height: var(--accordion-max-height);}
}

@keyframes accordion-close {
from {min-height: var(--accordion-max-height);}
to {min-height: var(--accordion-min-height);}
}

.details-collapsible-tab summary::-webkit-details-marker {
display:none;
}

.details-collapsible-tab > .accordion-collapsible-tab__content {
padding-bottom: 1rem;
margin-bottom: 0;
opacity: 0;
transition: 0.3s;
height: 0;
margin-top: 0;
padding-top: 1rem;
animation-name: accordion-content-close;
animation-duration: 0.3s;
animation-timing-function: ease-in-out;
}

.details-collapsible-tab[open] > .accordion-collapsible-tab__content {
opacity: 1;
height: auto;
animation-name: accordion;
animation-duration: 0.3s;
animation-timing-function: ease-in-out;
transform-origin: top;
}

@keyframes accordion {
from {transform: scaleY(0); opacity: 0;}
to {transform: scaleY(1); opacity: 1;}
}

@keyframes accordion-content-close {
from {margin-top: 0;}
to {margin-top: -300px;}
}


@keyframes accordion-content {
from {opacity: 0;}
to {opacity: 1;}
}

.pageContainer, .pageContainer img, .pageContainer > * {
width: 100%;
}


@media (max-width: 1019px) {
.collapsible-tab {
display: block;
}

.tabComponent{
margin: 0;
}

.tabContainer{
display: none;
}

.infoTitle {
padding: 0 1rem;
}

.pageContainer {
padding: 1% 5%;
}
}
</style>
{% schema %}
{
"name": "Tab Component",
"settings": [
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Padding top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Padding bottom",
"default": 36
},
{
"type": "color",
"id": "tab_bg",
"label": "Section Background",
"default": "#e5e5e5"
},
{
"type": "color",
"id": "tab_hover",
"label": "Tab hover",
"default": "#2eb8c0"
},
{
"type": "checkbox",
"id": "open_first_collapsible_row",
"default": false,
"label": "Open first collapsible tab",
"info": "This only applies to mobile view"
}
],
"blocks": [
{
"type": "tab",
"name": "Tab",
"settings": [
{
"type": "color",
"id": "label_bg",
"label": "Label background color",
"default": "#fff"
},
{
"type": "text",
"id": "tab_title",
"label": "Tab Title"
},
{
"type": "text",
"id": "info_title",
"label": "Info Title"
},
{
"type": "richtext",
"id": "info_description",
"label": "Description",
"default": "<p>Write more info here!</p>"
},
{
"type": "page",
"id": "page",
"label": "Page to show"
}
]
}
],
"max_blocks": 10,
"presets": [
{
"name": "Tab Component"
}
]
}
{% endschema %}

 

4. Add the section to your product page using the theme editor. Section name is Tab Component

Copied!
Back to blog

Leave a comment