views:

2808

answers:

2

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

A: 

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.
  });
});
Seb
There's an additional trick that you can use to prevent blinking of elements that are hidden on document.ready too. Take a look here - http://www.learningjquery.com/2008/10/1-awesome-way-to-avoid-the-not-so-excellent-flash-of-amazing-unstyled-content
Russ Cam
That's a great trick, thanks for sharing! :)
Seb
Well, the problem now is that the code above has the anchor working and the toggle itself - but only when going from HIDDEN to SHOWN. Once it is open, it cannot be closed again.Being new to Jquery I am unsure as to how I'd throw in the hide() to the solution provided so that toggle works fully.
toggle means precisely that if the object's showing, then hide it; if it's hidden, then show it. You could try to check .is(":visible"). Will update now with that.
Seb
Yes, I was reading through the JQuery docs page and according to their example, the hide/show property of toggle should work automatically.I tried your updated solution and the same result is taking place. Divs are opened but not closed. Maybe this has something to do with the anchor itself.
A: 

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?

Russ Cam
Thanks Russ. Yes, the url sample you provided has the effect im looking for. The show/hide toggle. However, in my page, having many of those parent divs and their respective child div, there seems to be an error of some sort.I tried with your code: once the child div is opened, it will not close.