jquery click toggle function

Question

I am using the below to open and close a menu onclick - but most importantly, to change the link text from 'Menu' to 'Close'.

Is there a way to change the 'Close' link text back to 'Menu' with out clicking the link, but by clicking any where on the page?

<span class="menu-link">Menu</span>
<span class="menu-link" style="display:none">Close</span>

    <script type="text/javascript">
       jQuery(function() {
        jQuery(".menu-link").click(function()
         {                     
          jQuery(".menu-link").toggle();
          });
       });
    </script>

Thanks

swestfall · Accepted Answer · 2014-06-17 12:51:53Z

2

Add a click event to the body tag so that when you click elsewhere on the page, it will toggle it or you could have it only work to change it back to menu.

jQuery("body").click(function () {
        jQuery(".menu-link").toggle();
    });

answered Jun 17, 2014 at 12:51

swestfall

4213 silver badges6 bronze badges

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

1 Comment

user3544484 Over a year ago

Thanks... how do I combine the 2 - including the body click event?

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Replace this:

jQuery(".menu-link").toggle();

with this:

$.trim($(this).text()) == "Menu" ? $(this).text("Close") : $(this).text("Menu");

And for this you don't need to have two spans, also use $.trim() to remove any leading/trailing whitespaces.

Demo

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 17, 2014 at 12:43

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Collectives™ on Stack Overflow

jquery click toggle function

2 Answers 2

1 Comment

Demo

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related