jQuery: How do I trigger .slideToggle() on links?

Question

How do I perform a jQuery 'slidetoggle' effect using a hyperlink, instead of an input button, as the action item?

At the jQuery reference page

It only gives an example of using a form input button.

I would like to have instead of a button, a hyperlink to be the toggle clickable action.

Answer 1

$("#anch").click(function () {
      $("#para1").slideToggle("slow");
    });



<a id='anch'>Toggle</a>
  <p id='para1'>
    This is the paragraph to end all paragraphs.  You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life.  Congratulations!
  </p>

Answer 2

If you have a link like so:

<a id="toggleLink" href="#">CLICK ME!</a>

Just use the following function to slideToggle your div

 $("#toggleLink").click(function () {
      $("#myDiv").slideToggle("slow");
    });

Answer 3

In addition to the other answers, if your hyperlink has an href attribute (which it should, so it will be displayed as a link), you may want to neutralize it by returning false on your event handler (if you don't, the page will scroll up when you click on the link):

$('a').click(function(){
    $('p').slideToggle();
    return false;
});

Other than that, there shouldn't be any difference between a button and an hyperlink. While you're reading the documentation, you'd be wise to start with jQuery's Selectors .