[Resolved] JavaScript Compatibility

Home Forums Support JavaScript Compatibility

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1447474
    Jennifer

    Hello,

    I am building a mega menu and it involves javascript. I have read some your forums and you say to place it in a hook and display after_footer. This is not working at all.

    How can we get the block to accept javascript code. I even installed code embed and that did not work either. How do I use this javascript code with hooks?

    Please help me :).

    LAYOUT CODE

    <div class="toggler">
    <a href="#" aria-label="">Discovery Bible</a>
    <span class="toggle-btn">
    <i class="fa fa-bars"></i>
    </span>
    </div>
    
    <ul class="toplevel">
     	<li class="submenu-holder">Home
    <div class="submenu">
    <ul>
     	<li><a href="#" aria-label="">sub item</a></li>
     	<li><a href="#" aria-label="">sub item</a></li>
     	<li><a href="#" aria-label="">sub item</a></li>
     	<li><a href="#" aria-label="">sub item</a></li>
     	<li><a href="#" aria-label="">sub item</a></li>
    </ul>
    <ul>
     	<li><a href="#" aria-label="">sub item</a></li>
     	<li><a href="#" aria-label="">sub item</a></li>
     	<li><a href="#" aria-label="">sub item</a></li>
     	<li><a href="#" aria-label="">sub item</a></li>
     	<li><a href="#" aria-label="">sub item</a></li>
    </ul>
    <ul>
     	<li><a href="#" aria-label="">sub item</a></li>
     	<li><a href="#" aria-label="">sub item</a></li>
     	<li><a href="#" aria-label="">sub item</a></li>
     	<li><a href="#" aria-label="">sub item</a></li>
     	<li><a href="#" aria-label="">sub item</a></li>
     	<li><a href="#" aria-label="">sub item</a></li>
    </ul>
    </div></li>
     	<li class="submenu-holder">Bible Project
    <div class="submenu">
    <ul>
     	<li><a href="#" aria-label="">sub a</a></li>
     	<li><a href="#" aria-label="">sub a</a></li>
     	<li><a href="#" aria-label="">sub a</a></li>
     	<li><a href="#" aria-label="">sub a</a></li>
    </ul>
    <ul>
     	<li><a href="#" aria-label="">sub a</a></li>
     	<li><a href="#" aria-label="">sub a</a></li>
     	<li><a href="#" aria-label="">sub a</a></li>
     	<li><a href="#" aria-label="">sub a</a></li>
     	<li><a href="#" aria-label="">sub a</a></li>
    </ul>
    <ul>
     	<li><a href="#" aria-label="">sub a</a></li>
     	<li><a href="#" aria-label="">sub a</a></li>
    </ul>
    </div></li>
     	<li class="submenu-holder">Bible App
    <div class="submenu">
    <ul>
     	<li><a href="#" aria-label="">sub b</a></li>
     	<li><a href="#" aria-label="">sub b</a></li>
     	<li><a href="#" aria-label="">sub b</a></li>
     	<li><a href="#" aria-label="">sub b</a></li>
    </ul>
    <ul>
     	<li><a href="#" aria-label="">sub b</a></li>
     	<li><a href="#" aria-label="">sub b</a></li>
     	<li><a href="#" aria-label="">sub b</a></li>
     	<li><a href="#" aria-label="">sub b</a></li>
    </ul>
    <ul>
     	<li><a href="#" aria-label="">sub b</a></li>
     	<li><a href="#" aria-label="">sub b</a></li>
     	<li><a href="#" aria-label="">sub b</a></li>
     	<li><a href="#" aria-label="">sub b</a></li>
    </ul>
    </div></li>
    </ul>
    <script>
    $('.submenu-holder a').click(function(){
    $('.submenu-holder').removeClass('.openMenu');
    $(this).parent().toggleClass('openMenu');
    	$('.openMenu .submenu').toggleClass('displayMenu');
    })
    $('.toggle-btn').click(function(){
    $('.submenu-holder').removeClass('.openMenu');
    $('.submenu').removeClass('displayMenu');
    $('.toplevel').toggle();
    })
    </script>

    Jennifer
    Living His Word Ministries, Inc.
    www.livinghisword.org

    #1447508
    Leo
    Staff
    Customer Support

    Hi there,

    Javascript should go in wp_footer typically.

    Where did you get the code from? Are you sure it’s working?

    I would consider using a mega menu plugin for something like this.

    #1447550
    Jennifer

    Okay yes, I got it to work, thank you πŸ™‚

    Jennifer
    Living His Word Ministries, Inc.
    www.livinghisword.org

    #1447553
    Leo
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.