1. HOT 2019 Cyber Monday Bundle Sales @ Divi.Help - 72% OFF: https://black-friday-2019.diviultimate.com/

Solved Divi mega menu: menu items opened/collapsed by default

Discussion in 'Get Help On Divi Wordpress' started by Niklas, Aug 12, 2019.

  1. Niklas

    Niklas New Member

    Hello everyone.
    I'm trying to have my menu items of a Divi mega menu (I have chosen a fullwidth menu in the Theme Customizer) opened by default. The following is the JavaScript code I've written but there is one little bug that I can't fix so that's because I'm asking for your help.

    HTML:
    <script>let btn = document.getElementsByClassName('to-scripts-btn')[0];
    btn.href = "javascript:void(0);";
    let sm = document.getElementsByClassName('sub-menu')[0];
    sm.style = "display: block;";
    sm.classList.add('et_pb_slide_dropdown_opened');
    let anchor = document.getElementsByClassName('mega-menu')[0].children[0];
    anchor.style.color = 'red';
    //the following two lines will throw an error
    document.getElementsByClassName('et_mobile_menu_arrow')[0].classList.add('et_pb_submenu_opened');
    anchor.children[0].classList.add('et_pb_submenu_opened');</script>
    upload_2019-8-12_21-54-45.png

    As you can see I've changed the color of the menu heading whose items should already be collapsed by default to red (also via JS - I know that it's also possible via CSS but it didn't seem to update so I did it with JS). My code is working fine but the icon (surrounded in the screenshot) should be the other way round, that's why it doesn't show up any items when closing the menu and opening it again:

    upload_2019-8-12_21-56-5.png

    It seems that I can't target the span (dropdown icon) since I get an error in the console:
    Code:
    Uncaught TypeError: Cannot read property 'classList' of undefined
    Both anchor.children[0] and document.getElementsByClassName('et_mobile_menu_arrow')[0] don't seem to work.

    upload_2019-8-12_22-3-52.png
     

    Attached Files:

  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    Kindly share your URL.
     
  3. Niklas

    Niklas New Member

  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try this:
    Code:
    <script>
    jQuery(function($) {
        $(".mega-menu:eq(0) > a > span").addClass('et_pb_submenu_opened');
    });
    </script>
     
  5. Niklas

    Niklas New Member

    Unfortunately, this code doesn't seem to do the job.
    It doesn't change anything while also producing no console errors.
     
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try the below instead:
    Code:
    <script>
    (function($) {
        
        function open_collapsible_submenus() {
            $(".mega-menu:eq(0) > a > span").addClass('et_pb_submenu_opened');
        }
        
        $(window).load(function() {
            setTimeout(function() {
                open_collapsible_submenus();
            }, 700);
        });
    })(jQuery);
    </script>
     
  7. Niklas

    Niklas New Member

    This code did the job, thanks! So you added a little delay to the function because the dropdown element needs some time to be displayed, right?
     
  8. Divi.Help

    Divi.Help Administrator
    Staff Member

    That's right.
     
    Niklas likes this.

Recommended Divi Hosting