CODEWITHSUNDEEP
jquerytoggle
Steve
Steve

Reputation: 1775

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.

Upvotes: 0

Views: 704

Answers (10)

swap
swap

Reputation: 282

Three options to solve your problem:

  1. jQuery Confilct

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

  2. Dynamic create menu-item-63 then used

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

  3. Coding mistake

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

Upvotes: 1

user2474272
user2474272

Reputation: 415

You need to replace '$' with 'jQuery'. Then it will work, and place your code below wp_head() section.

And try this code: 

jQuery(document).ready(function() {
     jQuery('#menu-item-63').find('a').click(function(e){
          e.preventDefault(); // Use this to stop the default behavior of anchor.
         jQuery('#newsletter-container').toggle();
     }); // Here
 });

Note: There is no element that have the id "#newsletter-container". So please make sure you are using right element Id.

Upvotes: 1

Trimantra Software Solution
Trimantra Software Solution

Reputation: 3329

You just need to fix your syntax error of jQuery and need to load jQuery in your page. Check the below working code snippet.

    $(document).ready(function() {
        $('#menu-item-63>a').click(function(){
            $('#newsletter-container').toggle();
        })
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

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

Upvotes: 1

Russell Jonakin
Russell Jonakin

Reputation: 1996

If you have many JavaScript libraries/plug-ins referenced in your site, like stated above, you could be having jQuery conflicts. You can try replacing the "$" with "jQuery" like below:

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

Also, you should always reference the jQuery library before any other JavaScript libraries or plug-ins because those sites may depend on jQuery as well.

Upvotes: 0

Abhay Yadav
Abhay Yadav

Reputation: 23

Check your ready and click event is working.

    $('#menu-item-63 a').click(function(){
        $('#newsletter-container').toggle();
    }

Upvotes: 0

Lokesh_Ram
Lokesh_Ram

Reputation: 391

Check for the syntax error by seeing the console of your browser by pressing F12. This error must be shown there...

Working code:

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

Upvotes: 0

Pierre
Pierre

Reputation: 837

There is a syntax error. It should be:

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

Upvotes: 1

shramee
shramee

Reputation: 5099

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

Upvotes: 3

clickbait
clickbait

Reputation: 2998

You have a syntax error in your script.

$(document).ready(function() {
    $('#menu-item-63 > a').click(function() {
        $('#newsletter-container').toggle();
    }
}); // You put "}" but it's supposed to be ")"

You also have an issue with the "subscribe" link.

<a href="#">Subscribe</a>

By default, a link does what you'd expect it to do. You set the href attribute to "#", so when you click on it, the browser will load the url "https://staging.venusanddiamonds.com/#," and that's not the behavior you want.

$(document).ready(function() {
    $('#menu-item-63 > a').click(function(event) {
        event.preventDefault(); // Stop the browser from performing the default action on the anchor
        $('#newsletter-container').toggle();
    }
});

Upvotes: 0

Jai
Jai

Reputation: 74738

You have a syntax error. The click event and doc ready have not been closed properly: 

     $(document).ready(function() {
         $('#menu-item-63>a').click(function(e){
              e.preventDefault(); // use this to stop the default behavior of anchor.
             $('#newsletter-container').toggle();
         }); // here
     }); // here too

Upvotes: 5

Related Questions