clickable tabs with video or image

1<div class="containerv8 product_tab_sec">
2  <div class="inner-container">
3    <div class="header-text">
4      The Completely Reinvented Beanbag
5    </div>
6    <p>The Moon Pod is engineered for superior comfort, loved by adults and kids.</p>
7
8    <div class="golden-capsule-three-col">
9      <div class="item-headings">
10        
11          <div class="items active">
12            <div>
13              <img src="//www.moonpod.co/cdn/shop/files/Rectangle_372.png?v=1715256659">
14              <span class="feature_desk_heading">Outrageous Comfort</span>
15            </div>
16            <span class="feature_mob_heading"></span>
17          </div>
18        
19          <div class="items ">
20            <div>
21              <img src="//www.moonpod.co/cdn/shop/files/Rectangle_373.png?v=1715256658">
22              <span class="feature_desk_heading">Adaptive Design</span>
23            </div>
24            <span class="feature_mob_heading"></span>
25          </div>
26        
27          <div class="items ">
28            <div>
29              <img src="//www.moonpod.co/cdn/shop/files/Rectangle_372_1.png?v=1715256658">
30              <span class="feature_desk_heading">Sleek, Striking Profile</span>
31            </div>
32            <span class="feature_mob_heading"></span>
33          </div>
34        
35          <div class="items ">
36            <div>
37              <img src="//www.moonpod.co/cdn/shop/files/Rectangle_372_1.png?v=1715256658">
38              <span class="feature_desk_heading">Bundle &amp; Gift</span>
39            </div>
40            <span class="feature_mob_heading"></span>
41          </div>
42        
43      </div>
44      <div class="img_container">
45        
46          <div class="capsule-img active">
47            
48
49            
50              
51                <video-component data-autoplay="true" data-background="true">
52                  <video playsinline="true" class="" autoplay="autoplay" muted="muted" loop="loop" preload="metadata"><source src="//www.moonpod.co/cdn/shop/videos/c/vp/5bdcdfe3eb454c0baf9fa624443cf5b9/5bdcdfe3eb454c0baf9fa624443cf5b9.HD-1080p-4.8Mbps-39672589.mp4?v=0" type="video/mp4"><img loading="lazy" hidden="" src="//www.moonpod.co/cdn/shop/files/preview_images/5bdcdfe3eb454c0baf9fa624443cf5b9.thumbnail.0000000000_small.jpg?v=1734131486"></video>
53                </video-component>
54              
55            
56          </div>
57        
58          <div class="capsule-img ">
59            
60
61            
62              
63                <video-component data-autoplay="true" data-background="true">
64                  <video playsinline="true" class="" autoplay="autoplay" muted="muted" loop="loop" preload="metadata"><source src="//www.moonpod.co/cdn/shop/videos/c/vp/8652dcfb4ca34bfdb7a55bdc0821f91f/8652dcfb4ca34bfdb7a55bdc0821f91f.HD-1080p-7.2Mbps-39672615.mp4?v=0" type="video/mp4"><img loading="lazy" hidden="" src="//www.moonpod.co/cdn/shop/files/preview_images/8652dcfb4ca34bfdb7a55bdc0821f91f.thumbnail.0000000000_small.jpg?v=1734131541"></video>
65                </video-component>
66              
67            
68          </div>
69        
70          <div class="capsule-img ">
71            
72
73            
74              
75                <video-component data-autoplay="true" data-background="true">
76                  <video playsinline="true" class="" autoplay="autoplay" muted="muted" loop="loop" preload="metadata"><source src="//www.moonpod.co/cdn/shop/videos/c/vp/913ce214c9074afaacb3fbd9596deb1e/913ce214c9074afaacb3fbd9596deb1e.HD-1080p-3.3Mbps-39672646.mp4?v=0" type="video/mp4"><img loading="lazy" hidden="" src="//www.moonpod.co/cdn/shop/files/preview_images/913ce214c9074afaacb3fbd9596deb1e.thumbnail.0000000000_small.jpg?v=1734131592"></video>
77                </video-component>
78              
79            
80          </div>
81        
82          <div class="capsule-img ">
83            
84
85            
86              
87                <video-component data-autoplay="true" data-background="true">
88                  <video playsinline="true" class="" autoplay="autoplay" muted="muted" loop="loop" preload="metadata"><source src="//www.moonpod.co/cdn/shop/videos/c/vp/9a4367a1cef244299da97841f9bd75da/9a4367a1cef244299da97841f9bd75da.HD-1080p-7.2Mbps-39672674.mp4?v=0" type="video/mp4"><img loading="lazy" hidden="" src="//www.moonpod.co/cdn/shop/files/preview_images/9a4367a1cef244299da97841f9bd75da.thumbnail.0000000000_small.jpg?v=1734131666"></video>
89                </video-component>
90              
91            
92          </div>
93        
94      </div>
95      <div class="text-container">
96       
97          <div class="desc-tab active">
98            <div class="desc-heading">Melt Into Zero-Gravity Bliss</div>
99            <div class="desc-para"><p>Every inch of Moon Pod conforms to your body, delivering a floating sensation that puts your mind and body at ease.</p></div>
100          </div>
101        
102          <div class="desc-tab ">
103            <div class="desc-heading">Experience Elevated Relaxation</div>
104            <div class="desc-para"><p>Filled with thousands of high-density beads, Moon Pod creates a unique floating sensation that promotes comfort and relaxation. Moon Pod is both durable and portable, so you can enjoy personalized support for every moment.</p></div>
105          </div>
106        
107          <div class="desc-tab ">
108            <div class="desc-heading">The Beanbag, Reinvented</div>
109            <div class="desc-para"><p>Moon Pod’s minimalist design combines style with functionality. Its striking profile and contemporary colors fit seamlessly into any space, offering an updated take to bulky furniture.</p></div>
110          </div>
111        
112          <div class="desc-tab ">
113            <div class="desc-heading">Share The Relaxation</div>
114            <div class="desc-para"><p>Bundle Moon Pod with the Crescent Backrest, or the Lunar Lift Footrest, for the ultimate relaxation experience. Give the gift of comfort any time of year and transform their space into a comfort sanctuary.</p></div>
115          </div>
116        
117      </div>
118    </div>
119  </div>
120</div>
121
122
123<style data-shopify="">
124   .category_product_item .card--product .card__media-main-img img, .category_product_item .card--product .card__hover-image img{
125      object-fit: contain;
126   }
127    .immy-capsule{
128  background: #F5F8FF;
129  }
130    @media(min-width:768px){
131
132
133    .product_tab_sec{
134            padding-bottom: 52px !important;
135    }
136       }
137    .product_tab_sec .item-headings .items{
138      display: flex;
139      gap: 8px;
140  }
141    .product_tab_sec .item-headings .items>div{
142      display: flex;
143      align-items: center;
144      gap: 10px;
145  }
146    .product_tab_sec .inner-containerv8 {
147      margin: auto;
148      display: flex;
149      flex-direction: column;
150      gap: 70px;
151  }
152    .containerv8 .img_container{
153          flex: 37%;
154    }
155
156  .product_tab_sec .header-text {
157      color: var(--soil-1, #3B3D1D);
158      text-align: justify;
159      font-size: 48px;
160      font-style: normal;
161      font-weight: 900;
162      line-height: 48px;
163    margin-bottom:12px;
164  }
165
166  .golden-capsule-three-col {
167      display: flex;
168      align-items: center;
169      gap: 4%;
170  }
171
172  .golden-capsule-three-col .item-headings {
173      flex: 35%;
174  }
175
176  .golden-capsule-three-col .capsule-img {
177      flex: 20%;
178  }
179
180
181  .golden-capsule-three-col .text-container {
182      flex: 35%;
183      padding-left: 5%;
184  }
185
186  .capsule-img {
187      max-height: 409px;
188  }
189
190  .capsule-img img {
191      height: 100%;
192      width: 100%;
193  }
194
195    .product_tab_sec video{
196      max-width: 450px;
197      min-height: 400px;
198      object-fit: cover;
199      border-radius: 40px;
200    }
201
202  .desc-tab {
203      display: none;
204  }
205
206  .desc-tab.active {
207      display: block;
208  }
209
210  .product_tab_sec .item-headings {
211      display: flex;
212      flex-direction: column;
213      gap: 48px;
214  }
215
216  .product_tab_sec .item-headings div span {
217        cursor: pointer;
218      color: var(--Brand-Purple, #CBCBE2);
219      font-size: 24px;
220      font-style: normal;
221      font-weight: 700;
222      line-height: 40px;
223  }
224
225  .product_tab_sec .item-headings div.active span {
226        color: #203E5C;
227      font-size: 30px;
228      font-style: normal;
229      font-weight: 800;
230      line-height: 40px;
231  }
232
233    .golden-capsule-three-col .capsule-img{
234      display:none;
235    }
236      .golden-capsule-three-col .capsule-img.active{
237      display:block;
238    }
239
240
241
242  .product_tab_sec .desc-tab {
243      position: relative;
244  }
245
246  .product_tab_sec .desc-tab::before {
247      content: '';
248      background-image: url('https://cdn.shopify.com/s/files/1/0039/5427/8515/files/Group_33837.png?v=1715339079');
249      position: absolute;
250         left: -87px;
251      display: block;
252      top: 50%;
253      transform: translateY(-50%);
254      background-repeat: no-repeat;
255      height: 159px;
256         width: 77px;
257      background-size: 100% 100%;
258  }
259
260    .product_tab_sec .item-headings img{
261          max-width: 30px;
262    }
263
264
265    .golden-capsule-three-col {
266          gap: 25px;
267
268  }
269  .product_tab_sec{
270    padding: 40px 20px;
271  }
272  .product_tab_sec .inner-container{
273         gap: 0px;
274  }
275  .product_tab_sec .header-text{
276       color: #203E5C;
277      text-align: center;
278      font-size: 36px;
279      font-style: normal;
280      font-weight: 700;
281      line-height: 48px;
282  }
283  .product_tab_sec p{
284    color: var(--color-BLACK, #000);
285  text-align: center;
286  font-size: 18px;
287  font-style: normal;
288  font-weight: 400;
289  line-height: normal;
290      text-align: center;
291  }
292  .product_tab_sec .capsule-img img{
293   max-width: 463px;
294  width: 100%;
295  }
296  .product_tab_sec .item-headings {
297      display: flex;
298      flex-direction: column;
299      gap: 40px;
300  }
301    .product_tab_sec .feature_desk_heading:active{
302      color: #203E5C;
303    font-size: 30px;
304    font-style: normal;
305    font-weight: 800;
306    line-height: 40px;
307    }
308
309  /* .product_tab_sec .feature_desk_heading:active{
310    color: #203E5C;
311    /* font-size: 20px; */
312    font-style: normal;
313    font-weight: 800;
314    line-height: 40px;
315  } */
316    .product_tab_sec .item-headings .items.active img {
317      border-radius: 222px;
318      border: 5px solid var(--Grey-Blue, #203E5C);
319      background: url(<path-to-image>) lightgray -10.025px -12.75px / 144.033% 141.883% no-repeat;
320      /* width: 51px;
321      height: 51px; */
322      max-width: 50px;
323
324  }
325  .product_tab_sec .item-headings img{
326
327  }
328  .product_tab_sec .desc-tab .desc-heading{
329    color: #203E5C;
330  font-size: 24px;
331  font-style: normal;
332  font-weight: 700;
333  line-height: 26px; /* 108.333% */
334  }
335  .product_tab_sec .text-containerv8 p{
336    color: #000;
337  text-align: justify;
338  font-size: 16px;
339  font-style: normal;
340  font-weight: 400;
341  line-height: normal;
342        margin-top: 10px;
343  }
344  .product_tab_sec .item-headings .items.active img{
345        max-width: 50px;
346  border-radius: 222px;
347  border: 3px solid var(--Grey-Blue, #203E5C);
348  background: url(<path-to-image>) lightgray -5.659px -10.029px / 160.211% 173.75% no-repeat;
349  }
350
351   .product_tab_sec .item-headings div.active span {
352        color: #203E5C;
353
354      font-size: 30px;
355      font-style: normal;
356      font-weight: 800;
357      line-height: 40px;
358      }
359
360    @media(min-width:768px){
361     .golden-capsule-three-col {
362      padding: 26px 0px 20px;
363
364  }
365
366  }
367
368    .product_slider {
369          padding-bottom: 40px;
370    }
371   .product_slider a {
372          margin: auto;
373      display: block;
374      max-width: 230px;
375    }
376  @media(max-width:768px){
377    .product_tab_sec .item-headings .items.active img{
378        max-width: 27px;
379        border-radius: 222px;
380        border: 3px solid var(--Grey-Blue, #203E5C);
381        background: url(<path-to-image>) lightgray -5.659px -10.029px / 160.211% 173.75% no-repeat;
382  }
383.containerv8 {
384    width: 100%;
385    margin: 0 auto;
386}
387
388    .product_tab_sec .desc-tab .desc-heading{
389       font-size: 18px;
390      text-align: center;
391    }
392    .product_tab_sec .text-containerv8 p{
393      font-size: 14px;
394      font-style: normal;
395      line-height: normal;
396      text-align: center;
397      margin-top: 8px;
398  }
399    .product_tab_sec {
400      padding: 24px 10px;
401  }
402    .golden-capsule-three-col {
403      gap: 25px;
404          display: grid;
405      grid-template-columns: repeat(2, 1fr);
406  }
407
408    .product_tab_sec .item-headings div span{
409       font-size: 14px;
410      font-style: normal;
411      font-weight: 700;
412      line-height: normal;
413  }
414     .product_tab_sec .item-headings div.active span {
415        color: #203E5C;
416      font-size: 14px;
417      font-style: normal;
418      font-weight: 800;
419      line-height: normal;
420      }
421  }
422  @media screen and (min-width:768px) {
423      .feature_mob_heading {
424          display: none;
425      }
426  }
427
428  @media screen and (max-width:767px) {
429
430      .product_tab_sec .inner-containerv8 {
431          gap: 2px;
432      }
433
434      .product_tab_sec .header-text {
435        font-size: 24px;
436        line-height: normal;
437         font-style: normal;
438        font-weight: 700;
439            word-spacing: unset;
440      }
441
442     .product_tab_sec p{
443        font-size: 14px;
444        font-style: normal;
445        font-weight: 400;
446        line-height: normal;
447      }
448
449      .golden-capsule-three-col {
450          flex-wrap: wrap;
451      }
452      .product_tab_sec .item-headings {
453          gap: 16px;
454      }
455
456      .golden-capsule-three-col .text-container {
457          flex: 100%;
458          padding-left: 0px;
459          margin-top: 80px;
460          grid-column: span 2;
461      }
462
463      .product_tab_sec .desc-tab::before {
464        background-image: url('https://cdn.shopify.com/s/files/1/0039/5427/8515/files/Group_33837.png?v=1715339079');
465          top: -220px;
466          left: 50%;
467          height: 350px;
468          width: 40px;
469          transform: translateX(-50%) rotate(90deg);
470      }
471
472      .product_tab_sec .desc-tab .desc-para {
473          font-size: 14px;
474      }
475    .product_tab_sec video{
476                 max-width: 202px;
477          min-height: 313px;
478    }
479  }
480 @media(min-width:1400px){
481.containerv8 {
482    width: 75%;
483    margin: 0 auto;
484}
485</style>
486
487<script>
488  var itemHeadings = document.querySelectorAll('.golden-capsule-three-col .item-headings>div');
489  var textContainers = document.querySelectorAll('.golden-capsule-three-col .text-container div.desc-tab');
490  var imgContainers = document.querySelectorAll('.golden-capsule-three-col .img_container .capsule-img');
491
492  itemHeadings.forEach((heading, index) => {
493    heading.addEventListener('click', () => {
494      itemHeadings.forEach((item) => item.classList.remove('active'));
495      textContainers.forEach((item) => item.classList.remove('active'));
496      imgContainers.forEach((item) => item.classList.remove('active'));
497
498      heading.classList.add('active');
499      imgContainers[index].classList.add('active');
500      textContainers[index].classList.add('active');
501    });
502  });
503</script>