Just for readability, you might want to use the toggle function and the slideToggle function too. Totally untested, but in the ballpark. Im also using the slideToggle's callback feature to WAIT until the slide is finished before changing the class.
$("p").toggle(function(){ el = $(this); el.next() .slideToggle("slow",function(){ el.removeClass("headerShown").addClass("headerhidden"); }); return false; },function(){ el = $(this); el.next() .slideToggle("slow",function(){ el.removeClass("headerHidden").addClass("headerShown"); }); return false; }); Sorry, cant test it now, but its close. Hope this helps a little. Glen On 7/6/07, SteelSoftware <[EMAIL PROTECTED]> wrote:
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