So many thanks Mike, you've helped me a lot. My background is pure CSS
so the onload stuff confused me somewhat. Thanks again
Steve
On Jul 7, 1:10 am, "Michael Geary" <[EMAIL PROTECTED]> wrote:
> You're not the first person who has gotten tripped up on this point. Because
> jQuery uses CSS-like selectors, it's easy to assume that they work like they
> do in CSS stylesheets. But there is a key difference.
>
> When you use a CSS selector in a stylesheet, that selector applies to all
> matching elements, regardless of when or how the elements are made to match.
>
> For example, if you have this style:
>
> .hideme { display: none; }
>
> Then any element with the "hideme" class will be hidden, even if you add
> that class to an element dynamically. The element will be hidden at the time
> you add the class.
>
> But when you use a selector in jQuery, it matches only those elements that
> satisfy the selector *at the time you execute the code*. The selector isn't
> saved away to be magically applied to elements that may later match.
>
> So, in your ready function, when you use $(".sidebarContent
> h3.headerHidden"), that matches only the elements that have the headerHidden
> class at page load time, not any elements that may later have that class
> added.
>
> One easy way to fix your code would be something along these lines:
>
> $(document).ready(function(){
> $(".sidebarContent h3").click(function(){
> var $this = $(this);
> if( $this.is('.headerShown') ) {
> $this.next().slideUp("slow");
> $this.removeClass('headerShown');
> $this.addClass('headerHidden');
> }
> else {
> $this.next().slideDown("slow");
> $this.removeClass('headerHidden');
> $this.addClass('headerShown');
> }
> return false;
> });
>
> });
>
> -Mike
>
> > From: SteelSoftware
>
> > I'm trying to show/hide sections of my site using jQuery, but
> > also changing the class of the element I'm targeting when the
> > slide is toggled. This is the HTML
>
> > <div class="sidebarContent">
> > <h3 class="headerShown">Top Scorer</h3>
> > <div class="content">
> > The club's top scorer is:
> > <ul>
> > <li><a href="xxxxxxxxxxx">Urn </a> - 18</li>
> > </ul>
> > </div>
> > </div>
>
> > The jQuery I'm using is:
> > $(document).ready(function(){
> > $(".sidebarContent h3.headerShown").click(function(){
> > $(this).next().slideUp("slow");
> > $(this).removeClass('headerShown');
> > $(this).addClass('headerHidden');
> > return false;
> > });
> > $(".sidebarContent h3.headerHidden").click(function(){
> > $(this).next().slideDown("slow");
> > $(this).removeClass('headerHidden');
> > $(this).addClass('headerShown');
> > return false;
> > });
> > });
>
> > Basically, when it's hidden, the class changes, making the
> > background image on the h3 element change. My problem is that
> > although the jQuery script says it's changing the class to
> > 'headerHidden', it won't slide down because it's going on the
> > original DOM, not the current one.
>
> > I'm sure the answer is to have some sort of conditional
> > statement in it, but since very few jQuery statements return
> > a boolean, I'm not sure how to.
