Jquery disable native href clikc function
Posted: Fri May 25, 2007 12:41 pm
I know the title is wonky, but I cannot think of how to phrase what I want to do. Lets say I have this markup:
What I want to accomplish (and what is already working) is that when you click on the <h3> tag, that the <div> just below it toggles. That is not a problem. However, I want to degrade peacefully when JS is not enabled, so I need the h3 tags to be anchors as well (like the first h3 in the example markup). How would I write the Jquery function to allow toggling but not allow following the href in the a tag? This is what I have as far as working Jquery code:
Code: Select all
<div id="mine-wrapper">
<h3><a href="http://www.google.com">My content stuff</a></h3>
<div>
<h4>Stuff 1</h4>
<h4>Stuff 2</h4>
<h4>Stuff 3</h4>
<h4>Stuff 4</h4>
<h4>Stuff 5</h4>
</div>
<h3>My content stuff more</h3>
<div>
<h4>Stuff 1</h4>
<h4>Stuff 2</h4>
<h4>Stuff 3</h4>
<h4>Stuff 4</h4>
<h4>Stuff 5</h4>
</div>
<h3>My content stuff again</h3>
<div>
<h4>Stuff 1</h4>
<h4>Stuff 2</h4>
<h4>Stuff 3</h4>
<h4>Stuff 4</h4>
<h4>Stuff 5</h4>
</div>
</div>Code: Select all
$(document).ready(function() {
$("#mine-wrapper").find('h3').css("cursor", "pointer");
// This does not work as it disables the toggle click
// $("#mine-wrapper").find('h3').find('a').click(function() { return false;});
$("#mine-wrapper").find('div').hide().end().find('h3').click(function() {
$(this).next().slideToggle();
});
});