Hello
I am using the Impulse theme.
I have added product description and ingredients tabs to my product page.
I would like the first tab to remain open by default. And i would like to be able to open both tabs at the same time if needed.
my store is www.thebodyshop.mu
password: cleeth
Thanks in advance
@TBS2022 ,
Please add this JavaScript to your .JS file
let tbs_nodes = document.querySelectorAll('.product-block');
for (let i = 0; i < tbs_nodes.length; i++) {
if (tbs_nodes[i].classList.contains('product-block--tab')) {
tbs_nodes[i].querySelector('.collapsibles-wrapper > button').classList.add('is-open');
tbs_nodes[i].querySelector('.collapsibles-wrapper > div').classList.add('is-open');
break;
}
}
Thanks!
hello @infoatcodelab7 - sorry not very good with code.
Where shall do I need to add this please?
thanks
code i already have in place on theme.css.liquid is this:
/* .collapsible-content.is-open {
visibility: visible;
display: block;
height: 100% !important;
border-bottom: none !important;
} /
/ .collapsibles-wrapper–border-bottom {
border: none !important;
} /
/ .collapsible-content.collapsible-content–all{ /
/ visibility: hidden; /
/ overflow: inherit !important;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
opacity: 1 !important;
height: 100% !important;
margin-top: -40px !important;
visibility: initial !important;
} /
.collapsible-content.is-open {
visibility: visible;
/ display: none !important ; */
height: fit-content!important;
border-bottom: none!important;
/* .collapsible-content .collapsible-content–all {
height: 67px !important;
} /
/ .collapsibles-wrapper–border-bottom{
border:none !important;
} */
}
.collapsible-trigger-btn–borders {
border: none !important;
}
.collapsibles-wrapper–border-bottom {
border: none !important;
}
.collapsibles-wrapper {
margin: 2rem 0 !important;
border-top: 1px solid #004236 !important;
}
.collapsible-trigger {
padding-left: 0;
border-bottom: 1px solid #004236 ;
}
.collapsible-trigger {
font-size: 1.125rem;
font-weight: 700;
letter-spacing: 0;
text-transform: initial;
}
.template-help-faqs .collapsible-trigger {
padding-left: 40px;
}
.collapsible-content.is-open {
height: 100% !important;
}
.collapsible-trigger.is-open {
border-bottom: none;
}
.collapsible-trigger .collapsible-trigger__icon {
width: 20px !important;
height: 20px !important;
}
.collapsible-trigger.is-open .collapsible-trigger__icon svg line:nth-child(2) {
display: none !important;
}
.collapsible-content {
border-bottom: none !important;
}
.collapsible-trigger-btn–borders+.collapsible-content .collapsible-content__inner {
padding-left: 0;
font-size: 1rem;
border: none !important;
}
/* .collapsible-content__inner.rte :last-child {
display: none !important;
} */
nothing happened ?
this code paste in Assets > theme.js file
let tbs_nodes = document.querySelectorAll('.product-block');
for (let i = 0; i < tbs_nodes.length; i++) {
if (tbs_nodes[i].classList.contains('product-block--tab')) {
tbs_nodes[i].querySelector('.collapsibles-wrapper > button').classList.add('is-open');
tbs_nodes[i].querySelector('.collapsibles-wrapper > div').classList.add('is-open');
break;
}
}
Thanks!
try to paste code in Assets > vendor-script-v10.js
click on SAVE button to save the change.
Thanks!
still nothing
it still doesnt work.
this is my code.
.collapsible-trigger__icon .icon{
width:12px;
height:12px
}
}
.collapsible-trigger–inline{
padding:11px 0 11px 40px
}
.collapsible-trigger–inline .collapsible-trigger__icon{
right:auto;
left:0;
}
.collapsible-trigger__icon–circle{
border:1px solid;
border-color:{{ settings.color_borders | default: “#1c1d1d” }};
border-color:var(–colorBorder);
width:28px;
height:28px;
border-radius:28px;
text-align:center
}
.collapsible-trigger__icon–circle .icon{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.collapsible-trigger.is-open .collapsible-trigger__icon>.icon-chevron-down{
transform:scaleY(-1);
}
.collapsible-trigger.is-open .collapsible-trigger__icon–circle>.icon-chevron-down{
transform:translate(-50%, -50%) scaleY(-1);
}
.collapsible-content{
transition:opacity 0.3s cubic-bezier(.25,.46,.45,.94),height 0.3s cubic-bezier(.25,.46,.45,.94)
}
.collapsible-content.is-open{
visibility:visible;
opacity:1;
transition:opacity 1s cubic-bezier(.25,.46,.45,.94),height 0.35s cubic-bezier(.25,.46,.45,.94);
}
.collapsible-content–all{
visibility:hidden;
overflow:hidden;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
opacity:0;
height:0
}
.collapsible-content–all .collapsible-content__inner{
transform:translateY(40px);
}
@media only screen and (max-width:768px){
.collapsible-content–small{
visibility:hidden;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
opacity:0;
height:0
}
.collapsible-content–small .collapsible-content__inner{
transform:translateY(40px);
}
}
.collapsible-content__inner{
transition:transform 0.3s cubic-bezier(.25,.46,.45,.94)
}
.is-open .collapsible-content__inner{
transform:translateY(0);
transition:transform 0.5s cubic-bezier(.25,.46,.45,.94)
}
.rte.collapsible-content__inner–faq{
padding-bottom:30px;
}
.collapsible-trigger[aria-expanded=true] .collapsible-label__closed{
display:block
}
.collapsible-label__open{
display:none
}
.collapsible-trigger[aria-expanded=true] .collapsible-label__open{
display:inline-block
}
.collapsible-content–sidebar{
visibility:hidden;
overflow:hidden;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
opacity:0;
height:0
}
@media only screen and (min-width:769px){
.collapsible-content–sidebar.is-open{
overflow:visible;
overflow:initial;
visibility:visible;
opacity:1;
height:auto;
}
}
I am also trying to do this . I would like the “Description”
tab open by default when a customer arrives on a product page. I tried the code but nothing 
Did anyone get a solution for this? I am still trying?
