Мобильная версияКод: Выделить всё
document.addEventListener("DOMContentLoaded", function () {
const templateContainer = document.querySelector(".elementor-element-787c298e"); // Unique template identifier
const boxes = templateContainer.querySelectorAll(".e-con-inner > .e-child");
if (boxes.length > 0) {
boxes[0].classList.add("active"); // First box is active by default on mobile
}
if (templateContainer && window.innerWidth {
box.addEventListener("click", function () {
// Remove active class from all boxes inside this template
boxes.forEach((b) => {
b.classList.remove("active");
b.style.backgroundColor = "transparent"; // Reset background color
});
// Add active class only to the clicked box
this.classList.add("active");
this.style.backgroundColor = "#E1E8EA"; // Set active background color
});
});
}
});< /code>
.e-con-inner {
display: flex;
gap: 16px;
}
/* Default state for all boxes */
.e-con-inner > .e-child {
flex: 1;
min-height: 150px; /* Default height for all boxes */
transition: flex-grow 0.4s ease-in-out, font-size 0.4s ease-in-out, background-color 0.4s ease-in-out, border 0.4s ease-in-out;
text-align: center;
position: relative;
overflow: hidden;
border: 1px solid #E1E8EA; /* All boxes have a border */
background-color: transparent;
}
/* Hover effect: Expand box & change background */
.e-con-inner > .e-child:hover {
flex-grow: 2;
background-color: #E1E8EA;
border: 1px solid #E1E8EA;
}
/* Reset flex-grow for non-hovered boxes */
.e-con-inner > .e-child {
flex-grow: 1;
background-color: transparent;
border: 1px solid #E1E8EA;
}
/* Ensure first box expanded by default */
.e-con-inner > .e-child:first-child {
flex-grow: 2;
background-color: #E1E8EA;
}
/* Hover effect: Expand first box & change background */
.e-con-inner > .e-child:hover,
.e-con-inner > .e-child.active {
flex-grow: 2;
background-color: #E1E8EA;
border: 1px solid #E1E8EA;
}
/* Desktop-specific styles */
@media (min-width: 768px) {
.e-con-inner > .e-child:first-child {
/* Ensure first box is expanded and visible on page load */
flex-grow: 2;
background-color: #E1E8EA;
}
/* Ensure hover-text is visible for the first box when the page loads */
.e-con-inner > .e-child:first-child .hover-text {
opacity: 1!important;
visibility: visible!important;
}
/* Reset first box when another box is hovered */
.e-con-inner > .e-child:first-child:not(:hover) {
font-size: 24px;
}
.e-con-inner > .e-child:first-child:not(:hover) .hover-text {
opacity: 0;
visibility: hidden;
}
.e-con-inner > .e-child:first-child:not(:hover) img {
transform: scale(1);
}
/* Adjust first box when hovered again */
.e-con-inner > .e-child:first-child:hover {
flex-grow: 2;
background-color: #E1E8EA;
}
}
/* Default heading size */
.e-child h3 {
transition: font-size 0.4s ease-in-out;
font-size: 24px;
}
/* Increase heading size for expanded box */
.e-child:hover h3,
.e-child.active h3,
.e-con-inner > .e-child:first-child h3 {
font-size: 40px;
}
/* Hide hover-text by default */
.e-child .hover-text {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease-in-out, visibility 0s;
position: absolute;
bottom: 10px;
left: 0;
right: 0;
padding: 10px;
}
/* Show hover-text for expanded box */
.e-child:hover .hover-text,
.e-child.active .hover-text,
.e-con-inner > .e-child:first-child .hover-text {
opacity: 1;
visibility: visible;
transition-delay: 0.2s;
}
/* Default image styling */
.e-child img {
transition: transform 0.3s ease-in-out;
display: block;
margin-bottom: 10px;
}
/* Enlarge image for expanded box */
.e-child:hover img,
.e-child.active img,
.e-con-inner > .e-child:first-child img {
transform: scale(1.2);
}
/* Mobile-specific styles */
@media (max-width: 767px) {
.e-con-inner {
flex-direction: column;
}
/* Default mobile box size */
.e-con-inner > .e-child {
min-height: 150px; /* Default size for all boxes */
}
/* Expanded mobile box */
.e-con-inner > .e-child.active {
min-height: 250px !important; /* Increased height for active box */
}
/* Reset first box when another is tapped */
.e-con-inner > .e-child:not(.active) h3 {
font-size: 24px;
}
.e-con-inner > .e-child:not(.active) .hover-text {
opacity: 0;
visibility: hidden;
}
.e-con-inner > .e-child:not(.active) img {
transform: scale(1);
}
}
/* Desktop-specific adjustments for smoother transitions */
@media (min-width: 768px) {
.e-con-inner {
display: flex;
flex-direction: row;
gap: 16px;
}
/* Slower transition on Desktop */
.e-con-inner > .e-child {
transition: flex-grow 0.8s ease-in-out, min-height 0.8s ease-in-out, font-size 0.4s ease-in-out, background-color 0.4s ease-in-out, border 0.4s ease-in-out;
}
/* Remove background color and reset height on unhovered boxes */
.e-con-inner > .e-child:not(.active) {
min-height: 250px;
}
/* Active state styling */
.e-con-inner > .e-child.active {
min-height: 250px; / * I n c r e a s e d h e i g h t f o r a c t i v e b o x * / < b r / > } < b r / > } < / c o d e > < b r / > < p r e C l a s s = " S n i p p e t - C o d e - h t m l l a n g - h t m l p r e t t y p r i n t - o v e r r i d e " > < c o d e > & l t ; d i v c l a s s = " e l e m e n t o r - e l e m e n t e l e m e n t o r - e l e m e n t - 7 8 7 c 2 9 8 e e - f l e x e - c o n - b o x e d e - c o n e - p a r e n t " d a t a - e l e m e n t _ t y p e = " c o n t a i n e r " d a t a - i d = " 7 8 7 c 2 9 8 e " d a t a - s e t t i n g s = " { & a m p ; q u o t ; b a c k g r o u n d _ b a c k g r o u n d & a m p ; q u o t ; : & a m p ; q u o t ; c l a s s i c & a m p ; q u o t ; } " & g t ; < b r / > & l t ; d i v c l a s s = " e - c o n - i n n e r " & g t ; < b r / > & l t ; d i v c l a s s = " e l e m e n t o r - e l e m e n t e l e m e n t o r - e l e m e n t - 1 f b d 3 f a 5 e - c o n - f u l l e - f l e x e - c o n e - c h i l d " d a t a - e l e m e n t _ t y p e = " c o n t a i n e r " d a t a - i d = " 1 f b d 3 f a 5 " & g t ; < b r / > & l t ; d i v c l a s s = " e l e m e n t o r - e l e m e n t e l e m e n t o r - e l e m e n t - 5 c d 8 1 8 6 0 e l e m e n t o r - w i d g e t e l e m e n t o r - w i d g e t - i m a g e " d a t a - e l e m e n t _ t y p e = " w i d g e t " d a t a - i d = " 5 c d 8 1 8 6 0 " d a t a - w i d g e t _ t y p e = " i m a g e . d e f a u l t " & g t ; < b r / > & l t ; d i v c l a s s = " e l e m e n t o r - w i d g e t - c o n t a i n e r " & g t ; & l t ; i m g a l t = " " c l a s s = " a t t a c h m e n t - l a r g e s i z e - l a r g e w p - i m a g e - 5 4 3 7 " h e i g h t = " 3 2 " s r c = " / w p - c o n t e n t / u p l o a d s / 2 0 2 5 / 0 3 / G r o u p - 1 9 0 . s v g " w i d t h = " 3 2 " & g t ; & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " e l e m e n t o r - e l e m e n t e l e m e n t o r - e l e m e n t - 1 5 6 3 f 1 5 3 e l e m e n t o r - w i d g e t e l e m e n t o r - w i d g e t - h e a d i n g " d a t a - e l e m e n t _ t y p e = " w i d g e t " d a t a - i d = " 1 5 6 3 f 1 5 3 " d a t a - w i d g e t _ t y p e = " h e a d i n g . d e f a u l t " & g t ; < b r / > & l t ; d i v c l a s s = " e l e m e n t o r - w i d g e t - c o n t a i n e r " & g t ; < b r / > & l t ; h 3 c l a s s = " e l e m e n t o r - h e a d i n g - t i t l e e l e m e n t o r - s i z e - d e f a u l t " & g t ; B u i l d & l t ; / h 3 & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " e l e m e n t o r - e l e m e n t e l e m e n t o r - e l e m e n t - 4 0 8 2 e c c 8 h o v e r - t e x t e l e m e n t o r - w i d g e t e l e m e n t o r - w i d g e t - t e x t - e d i t o r " d a t a - e l e m e n t _ t y p e = " w i d g e t " d a t a - i d = " 4 0 8 2 e c c 8 " d a t a - w i d g e t _ t y p e = " t e x t - e d i t o r . d e f a u l t " & g t ; < b r / > & l t ; d i v c l a s s = " e l e m e n t o r - w i d g e t - c o n t a i n e r " & g t ; < b r / > & l t ; p & g t ; T e s t t e x t h e r e & l t ; / p & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " e l e m e n t o r - e l e m e n t e l e m e n t o r - e l e m e n t - 6 e e f a 8 f 4 e - c o n - f u l l e - f l e x e - c o n e - c h i l d " d a t a - e l e m e n t _ t y p e = " c o n t a i n e r " d a t a - i d = " 6 e e f a 8 f 4 " & g t ; < b r / > & l t ; d i v c l a s s = " e l e m e n t o r - e l e m e n t e l e m e n t o r - e l e m e n t - 7 0 e 4 8 2 5 f e l e m e n t o r - w i d g e t e l e m e n t o r - w i d g e t - i m a g e " d a t a - e l e m e n t _ t y p e = " w i d g e t " d a t a - i d = " 7 0 e 4 8 2 5 f " d a t a - w i d g e t _ t y p e = " i m a g e . d e f a u l t " & g t ; < b r / > & l t ; d i v c l a s s = " e l e m e n t o r - w i d g e t - c o n t a i n e r " & g t ; & l t ; i m g a l t = " " c l a s s = " a t t a c h m e n t - l a r g e s i z e - l a r g e w p - i m a g e - 5 4 5 9 " h e i g h t = " 2 4 " s r c = " / w p - c o n t e n t / u p l o a d s / 2 0 2 5 / 0 3 / G r o u p - 1 9 1 . s v g " w i d t h = " 2 4 " & g t ; & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " e l e m e n t o r - e l e m e n t e l e m e n t o r - e l e m e n t - 4 1 d 2 e 7 1 9 e l e m e n t o r - w i d g e t e l e m e n t o r - w i d g e t - h e a d i n g " d a t a - e l e m e n t _ t y p e = " w i d g e t " d a t a - i d = " 4 1 d 2 e 7 1 9 " d a t a - w i d g e t _ t y p e = " h e a d i n g . d e f a u l t " & g t ; < b r / > & l t ; d i v c l a s s = " e l e m e n t o r - w i d g e t - c o n t a i n e r " & g t ; < b r / > & l t ; h 3 c l a s s = " e l e m e n t o r - h e a d i n g - t i t l e e l e m e n t o r - s i z e - d e f a u l t " & g t ; L a u n c h & l t ; / h 3 & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / >
Test text here
[img]/wp-content/uploads/2025/03/Group-192.svg[/img]
Scale
Test text here
[img]/wp-content/uploads/2025/03/Path-4434.svg[/img]
Feedback
Test text here
[img]/wp-content/uploads/2025/03/Path-4435.svg[/img]
Optimise
Test text here
Подробнее здесь: https://stackoverflow.com/questions/795 ... on-desktop
