Mixing JQuery's toggle() with #anchors

Question

Hey there, I have the following dilemma: I have a set of DIVs with child DIVS within them that are hidden by default. Initially, I was using javascript and onclick with anchors to achieve both a toggling and 'move-to-anchor' effect. Now that I have moved to the JQuery alternative, I am having problems reproducing the same 'move-to-anchor' effect. The toggling works just fine.

When you click an "h2 a" link in the parent div, the child div is shown through toggle. Here's a sample of one parent and child div setup:

<div class="full email">
<a id="test_anchor"></a>
  <h2 class="subsubtitle"><a href="#test_anchor">TITLE AND LINK</a></h2>
  <div class="description full">
  <p>THIS IS WHAT SHOWS ALL THE TIME, REGARLDESS OF THE TOGGLE</p>
  </div><!-- #description ends here -->

     <div id="c_1">
     THE DIV AND THE CONTENTS THAT ARE SHOWN AND HIDDEN
     </div><!-- #c_1 div ends here -->

</div><!-- .full .email ends here -->

//And here's the JQuery:

$(document).ready(function(){

$("#c_1,#c_2,#c_3,#c_4").hide();

$("div div h2 a").toggle(
    function() { $(this).parent().siblings("div:last").slideDown("slow") },
    function() { $(this).parent().siblings("div:last").hide() }

    );

});

Now the question is: How do I activate or reactivate that #anchor so that BOTH the Jquery slideDown/hide functions and the goold old 'move-to-anchor' come into play?

Kind regards G.Campos

Answer 1

What you're doing with the toggle function is toggling visibility of the matched elements, not what's inside them.

Try something like this:

$(function (){
  $("#c_1,#c_2,#c_3,#c_4").hide(); // good practice to hide in JS instead of CSS file :)

  // Assign toggle functionality.
  $("h2.subsubtitle a").click(function (){
    var jDiv = $(this).parent().siblings("div:last");

    if( jDiv.is(":visible") ){
      jDiv.hide("slow"); // you're toggling this div, not the anchor.
    } else {
      jDiv.show("slow");
    }

    return true; // if switched to false, anchor won't link to anything.
  });
});

Answer 2

Were you trying to achieve something like this?

Relevant jQuery code

$(function(){

    $("#c_1").hide();

    $("h2.subsubtitle a").toggle(
     function () { $(this).parent().siblings("div:last").slideDown("slow"); return false;},
     function () { $(this).parent().siblings("div:last").slideUp("slow"); return false; }                      
    );

});

EDIT:

In response to your comment, I have put a number of the show/hide sections on this example and all appears to work fine for me in IE6 and Firefox 3. You can edit the code for it by adding /edit onto the URL. Does this example work ok for you and what browser are you using?