Jquery – Mixing JQuery’s toggle() with #anchors

anchorjquerytoggle

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

Best Solution

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.
  });
});