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:
$(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();
});
});
Sorry dude, it didn't work. I'll keep playing with this for a bit.
Actually, it is an unordered list and that works out well. I am looking for something that semantically reflects what is being displayed. This is, in essence, a table of contents that will be used for navigation and I wanted the markup to reflect that. However, at the moment, the unordered list is working exactly how I want it to.
Edit | And I still run the same problem as having the headings of the list items as links that will still fire the click.
Last edited by RobertGonzalez on Fri May 25, 2007 6:03 pm, edited 1 time in total.