jQuery toggle is not really working

Question

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.

Change }}; to });. Also please see meta.stackoverflow.com/q/323579/11683. — GSerg
– GSerg, Commented Jun 1, 2016 at 7:29
it is better to provide a small demo than providing a link. also provide ALL RELEVANT CODE TO OP — guradio
– guradio, Commented Jun 1, 2016 at 7:29
@Steve in your live site you have a WP website with at least 10 plugins that load each one the javascript file that it wants/needs. Try to determine that you don't have conflicting libraries loading. Additionally you load all js files in head section and no defer or async attributes are used. Try to use WP total cache or some similar plugin that manipulates js and css files binding them together. But to tell you the truth the best way in such matters is to do it on your own and with no plugin. — user2560539
– user2560539, Commented Jun 8, 2016 at 17:49
@Steve.. in other words your problem is due to the way you load javascript files. The actual order of the scripts is causing you the problem, or some library is conflicting another. — user2560539
– user2560539, Commented Jun 8, 2016 at 17:51

Jai · Accepted Answer · 2016-06-01 07:31:47Z

5

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

answered Jun 1, 2016 at 7:31

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Steve Over a year ago

I can't get this code to work on the live site

Steve Over a year ago

Yes: TypeError: $ is not a function (line 226). Line 226 is $(document).ready(function() {

Jai Over a year ago

Ohh!!! As you have used jQuery then you need to load jQuery lib before this script.

Steve Over a year ago

Ahh. Thanks Jai. I have enqueued/added Jquery, and the same error remains... ? > See live site

shramee Over a year ago

This code won't work with WordPress... WordPress doesn't allow using $ for jQuery... Check my answer here... stackoverflow.com/questions/37562117/jquery-toggle-not-working/…

|

shramee · Accepted Answer · 2016-06-11 15:36:08Z

3

+25

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

edited Jun 11, 2016 at 15:36

answered Jun 10, 2016 at 6:09

shramee

5,0992 gold badges26 silver badges49 bronze badges

7 Comments

Steve Over a year ago

Hi Shramee. Yes it helps a lot. Thank you. I had to replace all $ with jQuery to avoid an error. #newsletter-container now exists on my site, on line 421 I believe. Unfortunately the toggle() is not occurring. #newsletter-container does not display when clicking #menu-item-63>a

shramee Over a year ago

Hi, link you shared to live site... staging.venusanddiamonds.com, still doesn't seem to have #newsletter-container, you may be using a hook which might not be getting called...

Steve Over a year ago

Search for newsletter-container in the source and you'll find  <div id="newsletter-container"> <div id="newsletter">

shramee Over a year ago

Ohh... yeah, it is there :) Sorry... And it is appearing too... However, seems like gravity form is not rendered...

shramee Over a year ago

Now includes a screenshot after clicking Subscribe and some sample styles to make it look like a dialog...

|

Peter Mortensen · Accepted Answer · 2016-08-28 19:50:41Z

1

There is a syntax error. It should be:

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

edited Aug 28, 2016 at 19:50

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jun 1, 2016 at 7:30

Pierre

8371 gold badge5 silver badges15 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2016-08-28 19:54:27Z

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>

Peter Mortensen · Accepted Answer · 2016-08-28 19:56:11Z

1

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.

edited Aug 28, 2016 at 19:56

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jun 10, 2016 at 12:00

user2474272

4151 gold badge4 silver badges14 bronze badges

1 Comment

user2474272 Over a year ago

You are using wordpress and try to run jQuery code before jquery library loaded

Peter Mortensen · Accepted Answer · 2016-08-28 19:56:52Z

1

Three options to solve your problem:

jQuery Confilct

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

Dynamic create menu-item-63 then used

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

Coding mistake

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

edited Aug 28, 2016 at 19:56

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jun 10, 2016 at 16:45

swap

2923 silver badges18 bronze badges

Comments

clickbait · Accepted Answer · 2016-06-04 23:32:45Z

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

Peter Mortensen · Accepted Answer · 2016-08-28 19:52:13Z

0

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

edited Aug 28, 2016 at 19:52

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jun 1, 2016 at 7:33

Lokesh_Ram

3915 silver badges10 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2016-08-28 19:52:49Z

0

Check your ready and click event is working.

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

edited Aug 28, 2016 at 19:52

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jun 1, 2016 at 7:42

Abhay Yadav

2311 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2016-08-28 19:53:37Z

0

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.

edited Aug 28, 2016 at 19:53

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jun 9, 2016 at 2:31

Russell Jonakin

2,06619 silver badges19 bronze badges

Collectives™ on Stack Overflow

jQuery toggle is not really working

10 Answers 10

10 Comments

7 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

10 Comments

7 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related