DIVIKODER
CSS koder:
******************************************************
/* Align Items Vertically Centered in Row */
/* Put in row Custom CSS - Main Element */
display:flex;
flex-direction:column;
align-items:center;
******************************************************
header#main-header.et-fixed-header, #main-header{
-webkit-box-shadow:none !important;
-moz-box-shadow:none !important;
box-shadow:none !important;
margin-top: 0px important;
top: 0px important;
}
/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}
.entry-title{display: none;}
******************************************************
/* woocommerce 5 columns on desktop */
@media all and (min-width:1024px) {
[class*=woocommerce] ul.products li.product {
width: 16.96%!important;
margin: 0 3.8% 2.992em 0!important;
clear: none!important;
}
[class*=woocommerce] ul.products li.product:nth-child(5n) {
margin-right:0px!important;
}
[class*=woocommerce] ul.products li.product:nth-child(5n+1) {
clear: both!important;
}
}
******************************************************
/* KB Slider */
.kbslider {
animation: kbsl 60s infinite;
}
@keyframes kbsl {
0% {
transform:scale(1)
}
50% {
transform:scale(1.2)
}
100% {
transform:scale(1)
}
}
******************************************************
Elfsight Lazy Loading:
eks.
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-9d3beb9e-4c72-4bd1-8ed6-c192fc9e56c7" data-elfsight-app-lazy></div>
data-elfsight-app-lazy
******************************************************
/* REVEAL A HIDDEN DIVI SECTION, ROW, OR MODULE ON BUTTON CLICK */
/* CSS: */
<style type="text/css">
.rv_button.closed:after {content:"\33";}
.rv_button.opened:after {content:"\32";}
</style>
/* JAVASCRIPT: */
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery('#reveal').hide();
jQuery('.rv_button').click(function(e)
{
e.preventDefault();jQuery("#reveal").slideToggle();
jQuery('.rv_button').toggleClass('opened closed');
});
});
</script>
CLASS:
Button:
rv_button closed
ID:
Section, row or module:
reveal
******************************************************
/* Go Back Button */
/* Button ID: */
pa-back-button
/*Theme Options / Integrations / <head> SCRIPT */
<script>
jQuery(document).ready(function() {
jQuery("#pa-back-button").attr('href', '#');
jQuery("#pa-back-button").click(function(e) {
// prevent default behavior
e.preventDefault();
// Go back 1 page
window.history.back();
});
});
</script>
******************************************************
/* Blurb to Image - Class on Blurb - Image on row */
blurbimswap
*****************
/* Blurb to Image */
.blurbimswap {
animation: blurbsw 20s infinite;
}
@keyframes blurbsw {
0% {
opacity:0;
}
50% {
opacity:1;
}
100% {
opacity:0;
}
}
******************************************************
/* Text Grow Animation */
.txgrow {
animation: txscale 15s infinite;
}
@keyframes txscale {
0% {
transform:scale(1);
}
50% {
transform:scale(3);
}
100% {
transform:scale(1);
}
}
******************************************************
text-size: clamp(minimum, preferred, maximum);
Divi responsive helper:
clamp(1.5rem, 5vw, 4rem)
******************************************************
/* Button Color Change */
.ctabtn a {
animation: ccbtn 10s infinite;
}
@keyframes ccbtn {
0% {
background: red;border:none;
}
33% {
background: blue;border:none;
}
66% {
background: purple;border:none;
}
100% {
background: red;border:none;
}
}
******************************************************
/*move and position the Button module over the center of the Image module*/
.pa-button-over-image > .et_pb_button_module_wrapper {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -45%);
z-index: 10;
transition: opacity 0.3s ease-in-out;
/*opacity: 0; remove comment for hover reveal effect*/
}
/*add an optional overlay over the image*/
.pa-button-over-image > .et_pb_image .et_pb_image_wrap:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #000000;
z-index: 9;
transition: opacity 0.3s ease-in-out;
opacity: 0.3; /*make this 0 for hover reveal effect*/
}
/*show button on image hover*/
.pa-button-over-image:hover > .et_pb_button_module_wrapper {
/*opacity: 1; remove comment for hover reveal effect*/
}
/*show overlay on image hover*/
.pa-button-over-image:hover > .et_pb_image .et_pb_image_wrap:before {
/*opacity: 0.3; remove comment for hover reveal effect*/
}
******************************************************
/*move and position the Text module over the center of the Image module*/
.pa-text-over-image > .et_pb_text {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -45%);
z-index: 10;
width: 100%;
transition: opacity 0.3s ease-in-out;
/*opacity: 0; remove comment for hover reveal effect*/
}
/*add an optional overlay over the image*/
.pa-text-over-image > .et_pb_image .et_pb_image_wrap:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
z-index: 9;
transition: opacity 0.3s ease-in-out;
opacity: 0.3; /*make this 0 for hover reveal effect*/
}
/*show overlay on image hover*/
.pa-text-over-image:hover > .et_pb_text {
/*opacity: 1; remove comment for hover reveal effect*/
}
/*show text on image hover*/
.pa-text-over-image:hover > .et_pb_image .et_pb_image_wrap:before {
/*opacity: 0.5; remove comment for hover reveal effect*/
}
******************************************************
/*move and position the Call-To-Action module over the center of the Image module*/
.pa-text-button-over-image > .et_pb_promo {
position: absolute;
top: 44%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
width: 100%;
transition: opacity 0.3s ease-in-out;
/*opacity: 0; remove comment for hover reveal effect*/
}
/*add an optional overlay over the image*/
.pa-text-button-over-image > .et_pb_image .et_pb_image_wrap:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
z-index: 9;
transition: opacity 0.3s ease-in-out;
opacity: 0.5; /*make this 0 for hover reveal effect*/
}
/*show overlay on image hover*/
.pa-text-button-over-image:hover > .et_pb_promo {
/*opacity: 1; remove comment for hover reveal effect*/
}
/*show call-to-action on image hover*/
.pa-text-button-over-image:hover > .et_pb_image .et_pb_image_wrap:before {
/*opacity: 0.5; remove comment for hover reveal effect*/
}
******************************************************
/* Hide Related YouTube Video Suggestions Sitewide */
<script>
jQuery(document).ready(function($ ) {
// add '&rel=0' to end of all YouTube video URL's
// to prevent displaying related videos
$('.et_pb_video iframe').attr( "src", function( i, val ) {
return val + '&rel=0';
});
});
</script>
******************************************************
/* remove divi default effects for items with a drop down menu */
.et-menu .menu-item-has-children > a:first-child {padding-right: 0px; padding-bottom: 17px !important;}
.et-menu .menu-item-has-children > a:first-child:after{content: ""; margin-top: -2px;}
/* .et-menu .menu-item-has-children {padding-right: 0px;} */
******************************************************
/*image aspect ratio square 1:1*/
.pa-image-1-1 .et_pb_image_wrap {
padding-top: 100%;
display: block;
}
.pa-image-1-1 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
/*image aspect ratio landscape 16:9*/
.pa-image-16-9 .et_pb_image_wrap {
padding-top: 56.25%;
display: block;
}
.pa-image-16-9 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
/*image aspect ratio landscape 3:2*/
.pa-image-3-2 .et_pb_image_wrap {
padding-top: 66.66%;
display: block;
}
.pa-image-3-2 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
/*blog image aspect ratio square 1:1*/
.pa-blog-image-1-1 .entry-featured-image-url {
padding-top: 100%;
display: block;
}
.pa-blog-image-1-1 .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
/*blog image aspect ratio landscape 16:9*/
.pa-blog-image-16-9 .entry-featured-image-url {
padding-top: 56.25%;
display: block;
}
.pa-blog-image-16-9 .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
/*blog image aspect ratio landscape 4:3*/
.pa-blog-image-4-3 .entry-featured-image-url {
padding-top: 75%;
display: block;
}
.pa-blog-image-4-3 .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
/*blog image aspect ratio landscape 3:2*/
.pa-blog-image-3-2 .entry-featured-image-url {
padding-top: 66.66%;
display: block;
}
.pa-blog-image-3-2 .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
******************************************************
/*Prevent menu from wrapping*/
.et-menu li li a {
width: 100%!important;
}
******************************************************
/* Make An Image Module Fill The Column Height */
/* this sets the height of the image module*/
/* put pa-full-height-image-column in Image Class */
.pa-full-height-image-column {
height: 100%;
}
/*this sets the height of the image container*/
.pa-full-height-image-column .et_pb_image_wrap {
height: 100%;
}
/*this sets the height and fit of the actual image*/
.pa-full-height-image-column img {
object-fit: cover;
height: 100%;
}
******************************************************
/* Place button modules next to each other in the same column*/
/* place pa-inline-buttons in Column Class */
/* Change spacings on Button */
.pa-inline-buttons .et_pb_button_module_wrapper {
display: inline-block;
}
/* Center pa-inline-buttons */
.pa-inline-buttons {
text-align: center !important;
}
******************************************************
/*bullet checklist by www.peeayecreative.com*/
/*put .pa-bullet-list-1 as class in text object */
.pa-bullet-list-1 ul {
list-style-type: none!important;
}
.pa-bullet-list-1 ul li:before {
content: '\e052'!important;
color: #2cba6c;
font-family: 'ETMODULES'!important;
margin-right: 10px;
margin-left: -14px;
font-size: 1.2em!important;
}
/*bullet chekclist by www.peeayecreative.com*/
/*put .pa-bullet-list-2 as class in text object */
.pa-bullet-list-2 ul {
list-style-type: none!important;
}
.pa-bullet-list-2 ul li:before {
content: '\e051'!important;
color: #e03574!important;
font-family: 'ETMODULES'!important;
margin-right: 10px;
margin-left: -14px;
font-size: 1.2em!important;
}
******************************************************
/* Fluid header Logo and Menu */
/* Insert ID: fluid-header in Section ID */
/* Enable full menu on tablet */
@media all and (min-width: 768px) {
#fluid-header .et_pb_menu__menu {
display: block;
}
#fluid-header .et_mobile_nav_menu {
display: none;
}
}
/* Use 'clamp function to size logo */
#fluid-header img {
max-width: clamp(150px, 20vw, 350px);
}
/* Use 'clamp function to size menu links */
#fluid-header a {
font-size: clamp(14px, 1.5vw, 22px);
}
/* Use 'clamp function to size dropdown link */
#fluid-header li li a {
font-size: clamp(12px, 1.5vw, 18px);
}
/* Use 'clamp function to size menu LH padding */
#fluid-header .et_pb_menu .et-menu li {
padding-left: clamp(2px, 1vw, 20px);
}
******************************************************
/* CSS FOR STACKING TEXT MODULES */
.text_inline .et_pb_text {
display: inline-block;
margin: 0 10px;
}
/* CSS FOR STACKING ICON MODULES */
.icon_inline .et_pb_icon {
display: inline-block;
margin: 0 10px;
}
/* CSS FOR STACKING BLURB MODULES */
.blurb_inline .et_pb_blurb {
display: inline-block;
margin: 0 10px;
}
/* CSS FOR STACKING IMAGE MODULES */
.image_inline .et_pb_image {
display: inline-block;
margin: 0 10px;
}
To center align any module in a single column row, place the CSS below to the main element of the row.
text-align: center !important;
******************************************************************
Fixed Divi Header That Shrinks
<script>
jQuery(document).ready(function(){
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 100) {
jQuery(".pa-header").addClass("pa-fixed-header");
}
else{
jQuery(".pa-header").removeClass("pa-fixed-header");
}
});
});
</script>
/* Set Section position fixed and middle */
/* Set Section Class to pa-header */
/*set the transition for the spacing shrinking action*/
.pa-header .et_pb_row {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/*set the background color of the fixed header when scrolling*/
.pa-fixed-header .et_pb_row {
padding: 0px 0;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/*set the transition for the logo shrinking action*/
.pa-header .et_pb_menu__logo img {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/*change the logo size when the header shrinks*/
.pa-fixed-header .et_pb_menu__logo img {
max-width: 80%;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/*set the transition for the font size shrinking action*/
.pa-header .et_pb_menu ul li a {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/*change the menu font size when the header shrinks*/
.pa-fixed-header .et_pb_menu ul li a {
font-size: 16px!important;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
******************************************************************
/* Glowing border or/and Background, maybe in between <style></style>
.glowing::before{
content: '';
position: absolute;
left: -2px;
top: -2px;
background: linear-gradient(45deg, #e8f74d, #ff6600d9, #00ff66, #13ff13, #ad27ad, #bd2681, #6512b9, #ff3300de, #5aabde);
background-size: 400%;
width: calc(100% + 5px);
height: calc(100% + 5px);
z-index: -1;
animation: glower 20s linear infinite;
}
@keyframes glower {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
******************************************************************
/* Filter background Image */
/* Put class: filterimg */
.filterimg {
animation: flt1 15s infinite;
}
@keyframes flt1 {
0% {backdrop-filter:grayscale(100%)}
50% {backdrop-filter:grayscale(0)}
100% {backdrop-filter:grayscale(100%)}
}
}
******************************************************************
CSS Animations
( Copy and paste into your Additional CSS Panel )
/* Rotate */
.roti {
animation: rota1 4s linear infinite;
}
@keyframes rota1 {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
/* Bounce */
.bounci {
animation: bou1 1s ease-in-out infinite;
}
@keyframes bou1 {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
/* Wobble */
.icwob {
animation: wobble 2s infinite;
}
@keyframes wobble {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(-10deg);
}
50% {
transform: rotate(10deg);
}
75% {
transform: rotate(-10deg);
}
100% {
transform: rotate(0deg);
}
}
******************************************************************
.frosty {
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}
******************************************************************
Fade image in and out
Set image and background of column to different images and set the class to imfd
.imfd {
animation: fim 20s infinite;
}
@keyframes fdim {
0% {opacity:1}
50% {opacity:0}
100% {opacity:1}
}
******************************************************************
/* Animated Button */
/* Put in Freeform CSS */
selector .et_pb_promo_button {
animation: bcol 10s infinite;
}
@keyframes bcol {
0% {background:blue}
50% {background:red}
100% {background:blue}
}
selector .et_pb_promo_button:hover {
animation: none;
background:blue;
}
******************************************************************
DIVI Falling rain effekt
Class: rain
Kode Modul:
<style>
.rain {
overflow: hidden;
}
.rain::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.rain .raindrop {
position: absolute;
bottom: 100%;
width: 2px;
height: 15px;
background: rgba(255, 255, 255, 0.6);
animation: fall linear infinite;
pointer-events: none;
}
@keyframes fall {
to {
transform: translateY(100vh);
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const rainSection = document.querySelector('.rain');
const numberOfRaindrops = 100; // You can adjust this number
for (let i = 0; i < numberOfRaindrops; i++) {
const raindrop = document.createElement('div');
raindrop.classList.add('raindrop');
raindrop.style.left = `${Math.random() * 100}%`;
raindrop.style.animationDuration = `${Math.random() * 1 + 0.5}s`; // Random duration between 0.5s and 1.5s
raindrop.style.animationDelay = `${Math.random() * 2}s`; // Random delay up to 2s
rainSection.appendChild(raindrop);
}
});
</script>
******************************************************************
DIVI Animated Underline
/* Middle Underline */
.mlineWt::after {
content:"";
position:absolute;
bottom:0;
left:50%;
transform:translate(-50%);
width:0;
height:3px;
background-color: #fff;
animation:growU 15s infinite;
}
@keyframes growU{
0%, 25% {width:0}
50%, 75% {width:100%}
}
.mlineDk::after {
content:"";
position:absolute;
bottom:0;
left:50%;
transform:translate(-50%);
width:0;
height:3px;
background-color: #474747;
transition:width 0.7s ease;
animation:growL 15s infinite;
}
******************************************************************
DIVI Auto-Adjusting Divi Menu Dropdown Width:
/*set the Divi menu dropdown auto width*/
@media only screen and (min-width: 981px) {
.nav li ul {
width: fit-content;
display: flex;
flex-direction: column;
}
.nav li li {
white-space: nowrap;
}
.nav li li a {
width: auto;
}
}
******************************************************************
DIVI Hide Lightbox Image Title:
/*--------------Hide Gallery Image Title--------------*/
.mfp-title {
display:none;
}
******************************************************************
DIVI Menu Item Spacing:
/*reduce menu item spacing*/
.et_pb_menu .et-menu > li {
padding-right: 6px;
padding-left: 6px;
}
/*reduce menu item spacing at specific breakpoint*/
@media screen and (max-width: 1366px) {
.et_pb_menu .et-menu > li {
padding-right: 6px;
padding-left: 6px;
}
}
/*adjust Divi Menu module breakpoint*/
@media only screen and (max-width: 1149px) {
.et_pb_menu .et_pb_menu__menu {
display: none;
}
.et_mobile_nav_menu {
display: block;
}
}
/*remove bullet points from submenu*/
.et_pb_menu .et_mobile_menu .entry-content ul {
list-style-type: none;
}
/*remove padding left on submenu*/
.et_pb_menu .et_mobile_menu {
padding-left: 0;
}
******************************************************************
Divi Open Submenu on Click:
JAVASCRIPT:
<script>
(function($) {
function setup_collapsible_submenus() {
var $menu = $('nav > ul.nav'),
top_level_link = '.menu-item-has-children > a';
$menu.find('a').each(function() {
$(this).off('click');
if ($(this).is(top_level_link)) {
$(this).attr('href', '#');
$(this).next('.sub-menu').addClass('hide');
}
if ($(this).siblings('.sub-menu').length) {
$(this).on('click', function(event) {
event.stopPropagation();
$(this).next('.sub-menu').toggleClass('visible');
return false;
});
}
$(window).click(function() {
//Hide the menus if visible
$('.sub-menu').removeClass('visible');
});
});
}
$(window).on('load', function () {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);
</script>
CSS:
/*change the visibility of the menu submenu on click*/
.nav li.et-touch-hover>ul,
.nav li:hover>ul {
opacity: 0;
visibility: hidden;
}
ul.sub-menu.hide.visible {
opacity: 1;
visibility: visible;
}
Javascript2 (Only one open at a time):
(function($) {
$(document).ready(function() {
$(‘#top-menu li.menu-item-has-children > a’).click(function(e) {
e.preventDefault();
$(this).parent().toggleClass(‘show-submenu’);
});
});
})(jQuery);
css2:
#et-top-navigation #top-menu li.et-hover ul.sub-menu {
display: none !important;
}
#et-top-navigation #top-menu li.show-submenu ul.sub-menu {
display: block !important;
visibility: visible !important;
opacity: 1!important;
}
******************************************************************
DIVI remove download on video:
<script>
jQuery(document).ready(function() {
if (jQuery('.lwp-no-download .et_pb_video_box').length !== 0) {
jQuery(".lwp-no-download .et_pb_video_box").find('video').attr('controlsList', 'nodownload');
}
});
</script>
Class = lwp-no-download
******************************************************************
DIVI Toggle Sections and Rows with Button:
https://www.youtube.com/watch?v=ayZLtF-PZMU
https://michellethecreator.com/toggle-divi-sections-and-rows-when-button-clicked/
The Classes I Used
In the multi button solution the buttons require two classes and the sections require two classes.
If you have five buttons, you will need to make sure that the classes identify the number of button it is which will correspond with the section or row you are targeting. If you want to copy and paste, the two classes for each button are listed below.
mtc_button_1 mtc_button_closed
mtc_button_2 mtc_button_closed
mtc_button_3 mtc_button_closed
mtc_button_4 mtc_button_closed
mtc_button_5 mtc_button_closed
The section classes follow the same pattern. Feel free to copy and paste the classes below.
mtc_element mtc_element_1
mtc_element mtc_element_2
mtc_element mtc_element_3
mtc_element mtc_element_4
mtc_element mtc_element_5
For the single button solution, the classes are listed below.
Button Classes:
toggle_btn_1 toggle_btn_closed
Section Classes:
toggle_content toggle_content_1
***************************************************************************************
MULTI BUTTON TOGGLE
CSS NEEDED FOR MULTI BUTTON SOLUTION
body:not(.et-fb) .mtc_element { display: none; }
body:not(.et-fb) .show-on-click,
body:not(.et-fb) .toggle-on-click { display: none;}
SCRIPT FOR MULIT BUTTON SOLUTION
<script>
jQuery(function($){
var buttons = {
'.mtc_button_1': {
'toggle': '',
'hide' : '.mtc_element_2,.mtc_element_3, .mtc_element_4, .mtc_element_5',
'show' : '.mtc_element_1'
},
'.mtc_button_2': {
'toggle': '',
'hide' : '.mtc_element_1,.mtc_element_3, .mtc_element_4, .mtc_element_5',
'show' : '.mtc_element_2'
},
'.mtc_button_3': {
'toggle': '',
'hide' : '.mtc_element_1,.mtc_element_2, .mtc_element_4, .mtc_element_5',
'show' : '.mtc_element_3'
},
'.mtc_button_4': {
'toggle': '',
'hide' : '.mtc_element_1,.mtc_element_2, .mtc_element_3, .mtc_element_5',
'show' : '.mtc_element_4'
},
'.mtc_button_5': {
'toggle': '',
'hide' : '.mtc_element_1,.mtc_element_2, .mtc_element_3, .mtc_element_4',
'show' : '.mtc_element_5'
}
};
$.each(buttons, function(button, elements) {
$(button).click(function(e){
e.preventDefault();
$(elements.toggle).slideToggle();
$(elements.show).slideDown();
$(elements.hide).slideUp();
$(button).toggleClass('mtc_button_opened mtc_button_closed');
});
});
});
</script>
***************************************************************************************
SINGLE BUTTON TOGGLE
CSS NEEDED FOR SINGLE BUTTON SOLUTION
body:not(.et-fb) .toggle_content { display: none; }
.et_pb_button.toggle_btn_opened:after { content:"\32"; }
.et_pb_button.toggle_btn_closed:after { content:"\33"; }
SCRIPT FOR SINGLE BUTTON SOLUTION
<script>
jQuery(function($){
var revealButtons = {
'.toggle_btn_1': '.toggle_content_1'
};
$.each(revealButtons, function(revealButton, revealElement) {
$(revealButton).click(function(e){
e.preventDefault();
$(revealElement).slideToggle();
$(revealButton).toggleClass('toggle_btn_opened toggle_btn_closed');
});
});
});
</script>
******************************************************************
Typescale.net CSS Export:
/* Fluid Typography with CSS clamp() */
:root {
/* Font Family */
--font-family: Inter, sans-serif;
/* Type Scale */
--display-lg-size: clamp(1.959rem, calc(1.637rem + 1.606vw), 3.008rem);
--display-lg-weight: 800;
--display-lg-line-height: 1.55;
--display-lg-letter-spacing: 0.015em;
--display-md-size: clamp(1.801rem, calc(1.550rem + 1.255vw), 2.622rem);
--display-md-weight: 800;
--display-md-line-height: 1.55;
--display-md-letter-spacing: 0.015em;
--h1-size: clamp(1.656rem, calc(1.463rem + 0.962vw), 2.284rem);
--h1-weight: 700;
--h1-line-height: 1.55;
--h1-letter-spacing: 0.02em;
--h2-size: clamp(1.399rem, calc(1.297rem + 0.512vw), 1.734rem);
--h2-weight: 600;
--h2-line-height: 1.55;
--h2-letter-spacing: 0.02em;
--h3-size: clamp(1.287rem, calc(1.218rem + 0.344vw), 1.511rem);
--h3-weight: 600;
--h3-line-height: 1.6;
--h3-letter-spacing: 0.025em;
--h4-size: clamp(1.183rem, calc(1.142rem + 0.205vw), 1.317rem);
--h4-weight: 500;
--h4-line-height: 1.6;
--h4-letter-spacing: 0.025em;
--h5-size: clamp(1.134rem, calc(1.105rem + 0.145vw), 1.229rem);
--h5-weight: 500;
--h5-line-height: 1.6;
--h5-letter-spacing: 0.03em;
--h6-size: clamp(1.088rem, calc(1.069rem + 0.092vw), 1.148rem);
--h6-weight: 500;
--h6-line-height: 1.6;
--h6-letter-spacing: 0.03em;
--body-xl-size: clamp(1.043rem, calc(1.034rem + 0.043vw), 1.071rem);
--body-xl-weight: 400;
--body-xl-line-height: 1.6;
--body-xl-letter-spacing: 0.03em;
*********
--body-size: clamp(1.000rem, calc(1.000rem + 0.000vw), 1.000rem);
--body-weight: 400;
--body-line-height: 1.6;
--body-letter-spacing: 0.03em;
*********
--body-sm-size: clamp(0.959rem, calc(0.967rem + -0.039vw), 0.933rem);
--body-sm-weight: 400;
--body-sm-line-height: 1.65;
--body-sm-letter-spacing: 0.03em;
--caption-lg-size: clamp(0.919rem, calc(0.934rem + -0.073vw), 0.871rem);
--caption-lg-weight: 400;
--caption-lg-line-height: 1.65;
--caption-lg-letter-spacing: 0.03em;
--caption-size: clamp(0.882rem, calc(0.902rem + -0.104vw), 0.813rem);
--caption-weight: 400;
--caption-line-height: 1.65;
--caption-letter-spacing: 0.03em;
--caption-sm-size: clamp(0.845rem, calc(0.872rem + -0.132vw), 0.759rem);
--caption-sm-weight: 300;
--caption-sm-line-height: 1.65;
--caption-sm-letter-spacing: 0.03em;
--overline-size: clamp(0.811rem, calc(0.842rem + -0.156vw), 0.709rem);
--overline-weight: 500;
--overline-line-height: 1.65;
--overline-letter-spacing: 0.03em;
}
******************************************************************