Cool! Thanks
On Aug 28, 12:38 am, Dan Evans <[EMAIL PROTECTED]> wrote:
> 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!
