One reason why the others may not have worked is because .toggle()
assigns a click handler to an element. It is the same as
writing .click() except that it takes two functions instead of one and
it alternates them. So the original way it's written says, "When the
user clicks this thing add a new click handler to it" If you clicked
it multiple times it might start working but it might have bizarre
results.
To add onto your most recent post I would recommend you try to do as
few calls to the DOM as possible so you can probably replace some
things with $(this) like so:
<script type="text/javascript">
$(document).ready(function(){
$('#toggleTwo').toggle(function(){
$(this).html('hide');
$('#rubricTwo').hide();
return false;
}, function(){
$(this).html('show');
$('#rubricTwo').show();
return false;
});
}); // end document.ready
</script>
In this case the keyword 'this' (without quotes) refers to the object
that was clicked that way we don't need to do another
getElementById(). I think you had it similar to this to begin with, so
you were closer to being correct than you thought ;)
- Dan
On Aug 27, 1:58 pm, voltron <[EMAIL PROTECTED]> wrote:
> thanks for the heads up Dan! I modified your code and it worked, you
> missed out the part that really hides and shows the element:
>
> <script type="text/javascript">
> $(document).ready(function(){
> $('#toggleTwo').toggle(function(){
> $('#toggleTwo').html('hide');
> $('#rubricTwo').hide();
> return false;
> }, function(){
> $('#rubricTwo').show();
> $('#toggleTwo').html('show');
> return false;
> });
> }); // end document.ready
>
> I am still curious why the other methods do not work
>
> On Aug 27, 10:11 pm, Dan Evans <[EMAIL PROTECTED]> wrote:
>
> > How about instead of putting a .toggle() inside a .click() just use
> > a .toggle()? Something like this:
> > <script type="text/javascript">
> > $(document).ready(function(){
>
> > $('#toggleTwo').toggle(function(){
> > $('#rubricTwo').html('hide');
> > return false;
> > }, function(){
> > $('#rubricTwo').html('show');
> > return false;
> > });
>
> > }); // end document.ready
>
> > </script>
>
> > - Dan
>
> > On Aug 27, 11:23 am, voltron <[EMAIL PROTECTED]> wrote:
>
> > > Hi all,
>
> > > I am toggling an element using A tags, I would like the A tag to
> > > display "Show" or "Hide" depending on the state. my proble is, I
> > > cannot get this to work properly:
>
> > > my code:
>
> > > <script type="text/javascript">
> > > $(document).ready(function(){
>
> > > $('#toggleTwo').click(function(){
> > > $('#rubricTwo').toggle(function(){
> > > $(this).html = "hide";} ,function(){$(this).html =
> > > "show";}
> > > );// end toggle
> > > return false;
> > > });
> > > }); // end document.ready
> > > </script>
>
> > > # ====== HTML
>
> > > <a href="" id="toggleTwo">hide</a>
>
> > > <div id="rubricTwo"> blah blah</div>
>
> > > Any ideas? Thanks!
