Steve Steve - 4 months ago 6x
Javascript Question

Jquery Toggle not working

On this site, I have the following


$(document).ready(function() {

the following menu:

<ul id="menu-bottom-menu" class="menu"><li id="menu-item-56"><a href="">Contact Us</a></li>
<li id="menu-item-63"><a href="#">Subscribe</a></li>
<li id="menu-item-55"><a href="">FAQ</a></li>
<li id="menu-item-54"><a href="">Privacy &amp; Terms</a></li>
<li id="menu-item-53"><a href="">News &amp; Events</a></li>

and the following div:

<div id="newsletter-container">
<div id="newsletter">

However, when I click on
in the bottom menu, the toggle does not work -
does not display.

Help appreciated.


Looks like you are using jQuery in WordPress...

In WordPress $ won't work out of the box to avoid conflicts...

You need to use following code...

jQuery(document).ready(function($) {

Basically you start your jQuery doc ready function with jQuery instead of $ and require $ as parameter. Since jQuery object is passed as parameter to this function you should be able to use jQuery with whatever you name the parameter.

Hope that helps ;)


Works like a charm now,

Used these styles to aid visibility...

#newsletter-container {
    padding: 10px 5px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 970px;
    height: 500px;
    z-index: 9999;
    margin: auto;
    background: #fff;
    display: none;
    box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.25);
    box-sizing: border-box;
    overflow: auto;

enter image description here