Hi everyone,

Firstly, I'm very new to jQuery, so this may seem like a stupid
question.

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.

Any help would be appreciated.
Many thanks
Steve W

Reply via email to