How to remove a link and add a function instead

Question

I have a closed system without the possibility to edit the html/css files. It generates something like this:

<li>
   <a href="exp.html">Linktext</a>
</li>

I want to remove the href attribute and replace it with a slideToggle function.

So far I have tried to write something like this:

$('li').removeAttr('href');
$('li').click(function(){
    $('#example').slideToggle();
});

I need to keep the <a> tag for its styling. For those who like it here is a fiddle!

Answer 1

First thing that comes to my mind is preventing your page from navigating to exp.html:

$('li').click(function(e){
    e.preventDefault();
    $('#example').slideToggle();
});

Basically, by preventing the default action of the click on this <a> element, you can stop the page from navigating to exp.html and call $("#example").slideToggle(); all in one go.