{"context":"et_builder_layouts","data":{"473":{"ID":473,"post_date":"2024-04-23 15:41:23","post_date_gmt":"2024-04-23 15:41:23","post_content":"[et_pb_row use_custom_gutter=\"on\" gutter_width=\"1\" make_equal=\"on\" custom_padding_last_edited=\"on|desktop\" _builder_version=\"4.24.3\" _module_preset=\"ab70d8e5-fb8d-42fc-b592-4ab7f4be8b3c\" width=\"100%\" max_width=\"1140px\" max_width_last_edited=\"off|phone\" module_alignment=\"center\" custom_margin=\"||||false|false\" custom_padding=\"10px||||false|false\" custom_padding_tablet=\"0px|20px|0px|20px|false|true\" custom_padding_phone=\"0px||0px||false|true\" hover_enabled=\"0\" global_colors_info=\"%91%93\" sticky_enabled=\"0\" template_type=\"row\"][et_pb_column type=\"4_4\" _builder_version=\"4.24.3\" _module_preset=\"default\" global_colors_info=\"{}\"][et_pb_accordion _builder_version=\"4.24.3\" _module_preset=\"default\" max_width=\"700px\" custom_margin=\"10px|0px|10px|25px|true|false\" custom_padding=\"||||false|false\" hover_enabled=\"0\" custom_css_free_form=\"selector .et_pb_toggle_title {||    transition: padding 0.3s ease;||}||  ||selector .et_pb_toggle {||  border: 0;||  border-left: 2px solid #D5D7E0;||  padding-bottom: 40px;||  padding-top: 0px;||  margin-bottom: 15px !important;||  transition: height 0.5s ease;||}||||selector .et_pb_toggle:last-child {||    padding-bottom: 0px;||}||||selector .et_pb_toggle_title {||  font-size: 20px;||  line-height: 23.87px;||  letter-spacing: -0.21px;||  font-weight: 800;||  z-index: 1;||}||  ||selector .et_pb_toggle_title,||selector .et_pb_toggle_content {||  \tpadding-top: 7px !important;||    padding-left: 30px !important;||}||||selector .et_pb_accordion_item.et_pb_toggle_open .et_pb_toggle_title {||    padding-left: 40px !important;||}||  ||selector .et_pb_accordion_item .et_pb_toggle_content {||    background: #FEF7F3;||    margin-top: -40px;||    margin-left: 20px;||    padding-top: 60px !important;||    padding-right: 20px;||    max-width: 620px;||    border-radius: 10px !important;||}  ||  ||selector .et_pb_accordion_item .et_pb_toggle_content ul::marker {||    color: #EB5E15 !important;||}||  ||selector .et_pb_accordion_item .et_pb_toggle_content ul li {||    font-size: 14px;||    line-height: 24px;||    font-weight: 400;||    letter-spacing: -0.21px;||}||  ||selector .et_pb_accordion_item.et_pb_toggle_open .et_pb_toggle_title,||selector .et_pb_accordion_item.et_pb_toggle_open .et_pb_toggle_title .step-number {||   color: #EB5E15; ||}||||selector .et_pb_accordion_item.et_pb_toggle_open .et_pb_toggle_title:before {||\t\tdisplay: block;||    background-color: #ffffff;||    border: 1px solid #EB5E15;||    color: #EB5E15;||}||  ||selector .et_pb_accordion_item .step-number {||    color: #ffffff;||}||||selector .et_pb_toggle_title::before {||   content: %22%22;||   display: inline-block;||   line-height: 40px; ||   text-align: center;||   color: #fff;||   font-weight: bold;||   border-radius: 50%;||   margin-right: 15px;||   z-index: 2;||   position: absolute;||   top: 0;||   left: -46px;||   width: 50px; ||   height: 50px;||   background-color: #D5D7E0;||}||  ||selector .step-number {||\t\tposition: absolute;||    top: 6px;||    left: -26px;||    z-index: 3;||}||  ||selector .et_pb_toggle_open,||selector .et_pb_toggle_close {||\t\tbackground: transparent;||}\" global_colors_info=\"{}\" sticky_enabled=\"0\"][et_pb_accordion_item title=\"Step 1\" open=\"on\" _builder_version=\"4.24.3\" _module_preset=\"default\" global_colors_info=\"{}\"]<h4><strong>Content Title<\/strong><\/h4>\n<ul>\n<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/span><\/li>\n<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/span><\/li>\n<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/span><\/li>\n<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/span><\/li>\n<\/ul>[\/et_pb_accordion_item][et_pb_accordion_item title=\"Step 2\" _builder_version=\"4.24.3\" _module_preset=\"default\" global_colors_info=\"{}\" open=\"off\"]<h4><strong>Content Title<\/strong><\/h4>\n<ul>\n<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/span><\/li>\n<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/span><\/li>\n<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/span><\/li>\n<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/span><\/li>\n<\/ul>[\/et_pb_accordion_item][et_pb_accordion_item title=\"Step 3\" _builder_version=\"4.24.3\" _module_preset=\"default\" global_colors_info=\"{}\" open=\"off\"]<h4><strong>Content Title<\/strong><\/h4>\n<ul>\n<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/span><\/li>\n<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/span><\/li>\n<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/span><\/li>\n<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/span><\/li>\n<\/ul>[\/et_pb_accordion_item][et_pb_accordion_item title=\"Step 4\" _builder_version=\"4.24.3\" _module_preset=\"default\" global_colors_info=\"{}\" open=\"off\"]<h4><strong>Content Title<\/strong><\/h4>\n<ul>\n<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/span><\/li>\n<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/span><\/li>\n<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/span><\/li>\n<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/span><\/li>\n<\/ul>[\/et_pb_accordion_item][et_pb_accordion_item title=\"Step 5\" _builder_version=\"4.24.3\" _module_preset=\"default\" global_colors_info=\"{}\" open=\"off\"]<h4><strong>Content Title<\/strong><\/h4>\n<ul>\n<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/span><\/li>\n<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/span><\/li>\n<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/span><\/li>\n<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/span><\/li>\n<\/ul>[\/et_pb_accordion_item][\/et_pb_accordion][et_pb_code _builder_version=\"4.24.3\" _module_preset=\"default\" global_colors_info=\"{}\"]<script><!-- [et_pb_line_break_holder] -->document.addEventListener('DOMContentLoaded', function() {<!-- [et_pb_line_break_holder] -->  var accordionItems = document.querySelectorAll('.et_pb_accordion_item');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  accordionItems.forEach(function(item, index) {<!-- [et_pb_line_break_holder] -->    var stepNumber = index + 1;<!-- [et_pb_line_break_holder] -->    var titleElement = item.querySelector('.et_pb_toggle_title');<!-- [et_pb_line_break_holder] -->    titleElement.innerHTML = '<span class=\"step-number\" data-attr=\"' + stepNumber + '\">' + stepNumber + '<\/span>' + titleElement.innerHTML;<!-- [et_pb_line_break_holder] -->    <!-- [et_pb_line_break_holder] -->    titleElement.style.setProperty('--step-number', stepNumber);<!-- [et_pb_line_break_holder] -->  });<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --><\/script>[\/et_pb_code][\/et_pb_column][\/et_pb_row]","post_title":"Custom Accordion with Step numbers","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"custom-accordion-with-step-numbers","to_ping":"","pinged":"","post_modified":"2024-04-23 15:41:23","post_modified_gmt":"2024-04-23 15:41:23","post_content_filtered":"","post_parent":0,"menu_order":0,"post_type":"et_pb_layout","post_mime_type":"","comment_count":"0","filter":"raw","post_meta":{"_et_pb_row_layout":["4_4"],"_et_pb_built_for_post_type":["page"]},"terms":{"8":{"name":"accordion","slug":"accordion","taxonomy":"layout_tag","parent":0,"all_parents":[],"description":""},"4":{"name":"Accordions","slug":"accordions","taxonomy":"layout_category","parent":0,"all_parents":[],"description":""},"9":{"name":"not_global","slug":"not_global","taxonomy":"scope","parent":0,"all_parents":[],"description":""},"6":{"name":"regular","slug":"regular","taxonomy":"module_width","parent":0,"all_parents":[],"description":""},"10":{"name":"row","slug":"row","taxonomy":"layout_type","parent":0,"all_parents":[],"description":""}}}},"presets":"","global_colors":"","images":[],"thumbnails":[]}