Steve Steve - 3 months ago 11
jQuery Question

jQuery toggle is not really working

On this site, I have the following

<script>


<script>
$(document).ready(function() {
$('#menu-item-63>a').click(function(){
$('#newsletter-container').toggle();
}
}};
</script>


And the following menu:

<ul id="menu-bottom-menu" class="menu"><li id="menu-item-56"><a href="https://staging.venusanddiamonds.com/contact">Contact Us</a></li>
<li id="menu-item-63"><a href="#">Subscribe</a></li>
<li id="menu-item-55"><a href="https://staging.venusanddiamonds.com/faq">FAQ</a></li>
<li id="menu-item-54"><a href="https://staging.venusanddiamonds.com/privacy-terms">Privacy &amp; Terms</a></li>
<li id="menu-item-53"><a href="https://staging.venusanddiamonds.com/news-events">News &amp; Events</a></li>
</ul>


And the following div:

<div id="newsletter-container">
<div id="newsletter">
...etc...
</div>
</div>


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

Answer

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($) {
    $('#menu-item-63>a').click(function(){
        $('#newsletter-container').toggle();
    });
});

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 ;)

EDIT

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

Comments