[jQuery] Re: Changing class on a preceding element by click link in another div
Karl, I removed the space you spotted and it works! You are awesome! As for the other methods, thanks for sharing. I'll be studying them to understand their approaches. Thanks On Jun 3, 11:23 pm, Karl Swedberg [EMAIL PROTECTED] wrote: Ah ha! I think I see the problem, Jared: h3 class=accToggler Notice the space between accToggler and the quotation mark? I think that will kill it in IE, because it's looking for an exact match on the className property. If you can't avoid that space, you could switch the expression around a bit to say on click, basically, if the class is accTogglerClose, make it accToggler, otherwise make it accTogglerClose. So instead of this: this.className = this.className == 'accToggler' ? 'accTogglerClose' : 'accToggler'; you could do this: this.className = this.className == 'accTogglerClose' ? 'accToggler' : 'accTogglerClose'; You could also use a regular expression, testing to see if the class has Toggler at the end, with or without the space. Something like this: thisclassName = /Toggler\s?$/.test(this.className) ? 'accTogglerClose' : 'accToggler'; Or, if you want to go totally jQuery, you could do this instead of the above line: var $this = $(this); if ($this.is('.accToggler')) { $this.removeClass('accToggler').addClass('accTogglerClose');} else { $this.removeClass('accTogglerClose').addClass('accToggler'); } Any of those should work, I think. Let me know which one you choose! :-) --Karl _ Karl Swedbergwww.englishrules.comwww.learningjquery.com On Jun 3, 2007, at 9:39 PM, [EMAIL PROTECTED] wrote: It seems IE6 and IE7, but not Firefox 2. Here's a link to the page:http://www.studioturn.com/staging/nr/ ailment/adult-add-adhd-symptoms-solutions-info.html The script is on a link in a purple colored box a bit down the page with the text The Difference Between ADD and ADHD On Jun 3, 7:32 pm, Karl Swedberg [EMAIL PROTECTED] wrote: Weird. Only in IE7? Can you point us to a page that has the code? It might help to see it in action and take a look at the HTML as well. --Karl _ Karl Swedbergwww.englishrules.comwww.learningjquery.com On Jun 3, 2007, at 6:04 PM, [EMAIL PROTECTED] wrote: It seems I spoke too soon. It appears that the very first instance of the .accToggler class does not have its class changed to the .accTogglerClose class when clicked in IE7. The .accContent expands, but the class does not change. My close link in the expanded content when clicked sets the class to the .accTogglerClose class and collapses the content. However, the background image of that close is then set to show a Close message, when it should show the Open message from the .accToggler settings. On May 27, 9:16 pm, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Perfect! Thank you! On May 25, 7:43 pm, Karl Swedberg [EMAIL PROTECTED] wrote: Hi Jared, It looks like the problem now might be caused by the .click() on the p.close sort of butting into the add/remove class game where the .toggle() method was handling it just fine. I'm going to suggest losing the .toggle() altogether and swapping the class with your initial .click() on the accToggler class. Give this a whirl: script type=text/javascript $(function() { $('#ailment .accContent').hide().end() .find('.accToggler').click(function() { this.className = this.className == 'accToggler' ? 'accTogglerClose' : 'accToggler'; $(this).next().slideToggle(); }); $('#ailment p.close').click(function() { $(this).parent().slideUp() .prev().removeClass('accTogglerClose').addClass ('accToggler'); }); }); /script I think that should do it. --Karl _ Karl Swedbergwww.englishrules.comwww.learningjquery.com On May 25, 2007, at 2:06 PM, [EMAIL PROTECTED] wrote: Karl, that worked perfect. However, when I then click on the toggler that has been changed back, the class on it is not being changed. Here's the complete jQuery stuff, with the section you refined at the bottom: script type=text/javascript $(function() { $ ('#ailment').find('.accContent').hide().end().find ('.accToggler').click(function() { $(this).next().slideToggle(); }); $(.accToggler).toggle(function() { $(this).removeClass (accToggler).addClass(accTogglerClose); },function(){ $(this).removeClass (accTogglerClose).addClass(accToggler); }); $('#ailment p.close').click(function() { $(this).parent().slideUp() .prev().removeClass ('accTogglerClose').addClass('accToggler'); }); }); /script On May 25, 1:48 pm, Karl Swedberg [EMAIL
[jQuery] Re: Changing class on a preceding element by click link in another div
It seems I spoke too soon. It appears that the very first instance of the .accToggler class does not have its class changed to the .accTogglerClose class when clicked in IE7. The .accContent expands, but the class does not change. My close link in the expanded content when clicked sets the class to the .accTogglerClose class and collapses the content. However, the background image of that close is then set to show a Close message, when it should show the Open message from the .accToggler settings. On May 27, 9:16 pm, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Perfect! Thank you! On May 25, 7:43 pm, Karl Swedberg [EMAIL PROTECTED] wrote: Hi Jared, It looks like the problem now might be caused by the .click() on the p.close sort of butting into the add/remove class game where the .toggle() method was handling it just fine. I'm going to suggest losing the .toggle() altogether and swapping the class with your initial .click() on the accToggler class. Give this a whirl: script type=text/javascript $(function() { $('#ailment .accContent').hide().end() .find('.accToggler').click(function() { this.className = this.className == 'accToggler' ? 'accTogglerClose' : 'accToggler'; $(this).next().slideToggle(); }); $('#ailment p.close').click(function() { $(this).parent().slideUp() .prev().removeClass('accTogglerClose').addClass('accToggler'); }); }); /script I think that should do it. --Karl _ Karl Swedbergwww.englishrules.comwww.learningjquery.com On May 25, 2007, at 2:06 PM, [EMAIL PROTECTED] wrote: Karl, that worked perfect. However, when I then click on the toggler that has been changed back, the class on it is not being changed. Here's the complete jQuery stuff, with the section you refined at the bottom: script type=text/javascript $(function() { $ ('#ailment').find('.accContent').hide().end().find ('.accToggler').click(function() { $(this).next().slideToggle(); }); $(.accToggler).toggle(function() { $(this).removeClass(accToggler).addClass(accTogglerClose); },function(){ $(this).removeClass(accTogglerClose).addClass(accToggler); }); $('#ailment p.close').click(function() { $(this).parent().slideUp() .prev().removeClass('accTogglerClose').addClass('accToggler'); }); }); /script On May 25, 1:48 pm, Karl Swedberg [EMAIL PROTECTED] wrote: Hi Jared, It looks like there are a few ways you can tighten up your selectors, but the part that you're asking about could be changed from this ... $('#ailment').find('.close').click(function() { $('.accContent').slideUp(); $(this).prev('.accToggler').removeClass (accTogglerClose).addClass(accToggler); }); to this ... $('#ailment p.close').click(function() { $(this).parent().slideUp() .prev().removeClass('accTogglerClose').addClass('accToggler'); }); So, you're first traversing from the clicked element to its parent and sliding it up; then, you're traversing to the previous element -- in relation to the parent -- and swapping the classes on it. Hope that helps. --Karl _ Karl Swedbergwww.englishrules.comwww.learningjquery.com On May 25, 2007, at 11:24 AM, [EMAIL PROTECTED] wrote: I'm trying to have a close link in a div that is expanded by click on an h3 that is the toggler. The trick is, I need that close click to then change the class of the h3 that preceeds it, not all h3s on the page. h3 class=accToggler Title/h3 div class=accContent pContent/p p class=closeClose/p /div So far my script looks like this: script type=text/javascript $(function() { $ ('#ailment').find('.accContent').hide().end().find ('.accToggler').click(function() { $(this).next().slideToggle(); }); $(.accToggler).toggle(function() { $(this).removeClass (accToggler).addClass(accTogglerClose); },function(){ $(this).removeClass (accTogglerClose).addClass(accToggler); }); $('#ailment').find('.close').click(function() { $('.accContent').slideUp(); $ (this).prev('.accToggler').removeClass(accTogglerClose).addClass (accToggler); }); }); /script Thanks in advance.
[jQuery] Re: Changing class on a preceding element by click link in another div
Weird. Only in IE7? Can you point us to a page that has the code? It might help to see it in action and take a look at the HTML as well. --Karl _ Karl Swedberg www.englishrules.com www.learningjquery.com On Jun 3, 2007, at 6:04 PM, [EMAIL PROTECTED] wrote: It seems I spoke too soon. It appears that the very first instance of the .accToggler class does not have its class changed to the .accTogglerClose class when clicked in IE7. The .accContent expands, but the class does not change. My close link in the expanded content when clicked sets the class to the .accTogglerClose class and collapses the content. However, the background image of that close is then set to show a Close message, when it should show the Open message from the .accToggler settings. On May 27, 9:16 pm, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Perfect! Thank you! On May 25, 7:43 pm, Karl Swedberg [EMAIL PROTECTED] wrote: Hi Jared, It looks like the problem now might be caused by the .click() on the p.close sort of butting into the add/remove class game where the .toggle() method was handling it just fine. I'm going to suggest losing the .toggle() altogether and swapping the class with your initial .click() on the accToggler class. Give this a whirl: script type=text/javascript $(function() { $('#ailment .accContent').hide().end() .find('.accToggler').click(function() { this.className = this.className == 'accToggler' ? 'accTogglerClose' : 'accToggler'; $(this).next().slideToggle(); }); $('#ailment p.close').click(function() { $(this).parent().slideUp() .prev().removeClass('accTogglerClose').addClass ('accToggler'); }); }); /script I think that should do it. --Karl _ Karl Swedbergwww.englishrules.comwww.learningjquery.com On May 25, 2007, at 2:06 PM, [EMAIL PROTECTED] wrote: Karl, that worked perfect. However, when I then click on the toggler that has been changed back, the class on it is not being changed. Here's the complete jQuery stuff, with the section you refined at the bottom: script type=text/javascript $(function() { $ ('#ailment').find('.accContent').hide().end().find ('.accToggler').click(function() { $(this).next().slideToggle(); }); $(.accToggler).toggle(function() { $(this).removeClass (accToggler).addClass(accTogglerClose); },function(){ $(this).removeClass (accTogglerClose).addClass(accToggler); }); $('#ailment p.close').click(function() { $(this).parent().slideUp() .prev().removeClass ('accTogglerClose').addClass('accToggler'); }); }); /script On May 25, 1:48 pm, Karl Swedberg [EMAIL PROTECTED] wrote: Hi Jared, It looks like there are a few ways you can tighten up your selectors, but the part that you're asking about could be changed from this ... $('#ailment').find('.close').click(function() { $('.accContent').slideUp(); $(this).prev('.accToggler').removeClass (accTogglerClose).addClass(accToggler); }); to this ... $('#ailment p.close').click(function() { $(this).parent().slideUp() .prev().removeClass('accTogglerClose').addClass('accToggler'); }); So, you're first traversing from the clicked element to its parent and sliding it up; then, you're traversing to the previous element -- in relation to the parent -- and swapping the classes on it. Hope that helps. --Karl _ Karl Swedbergwww.englishrules.comwww.learningjquery.com On May 25, 2007, at 11:24 AM, [EMAIL PROTECTED] wrote: I'm trying to have a close link in a div that is expanded by click on an h3 that is the toggler. The trick is, I need that close click to then change the class of the h3 that preceeds it, not all h3s on the page. h3 class=accToggler Title/h3 div class=accContent pContent/p p class=closeClose/p /div So far my script looks like this: script type=text/javascript $(function() { $ ('#ailment').find('.accContent').hide().end().find ('.accToggler').click(function() { $(this).next().slideToggle(); }); $(.accToggler).toggle(function() { $(this).removeClass (accToggler).addClass(accTogglerClose); },function(){ $(this).removeClass (accTogglerClose).addClass(accToggler); }); $('#ailment').find('.close').click(function() { $('.accContent').slideUp(); $ (this).prev('.accToggler').removeClass (accTogglerClose).addClass (accToggler); }); }); /script Thanks in advance.
[jQuery] Re: Changing class on a preceding element by click link in another div
It seems IE6 and IE7, but not Firefox 2. Here's a link to the page: http://www.studioturn.com/staging/nr/ailment/adult-add-adhd-symptoms-solutions-info.html The script is on a link in a purple colored box a bit down the page with the text The Difference Between ADD and ADHD On Jun 3, 7:32 pm, Karl Swedberg [EMAIL PROTECTED] wrote: Weird. Only in IE7? Can you point us to a page that has the code? It might help to see it in action and take a look at the HTML as well. --Karl _ Karl Swedbergwww.englishrules.comwww.learningjquery.com On Jun 3, 2007, at 6:04 PM, [EMAIL PROTECTED] wrote: It seems I spoke too soon. It appears that the very first instance of the .accToggler class does not have its class changed to the .accTogglerClose class when clicked in IE7. The .accContent expands, but the class does not change. My close link in the expanded content when clicked sets the class to the .accTogglerClose class and collapses the content. However, the background image of that close is then set to show a Close message, when it should show the Open message from the .accToggler settings. On May 27, 9:16 pm, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Perfect! Thank you! On May 25, 7:43 pm, Karl Swedberg [EMAIL PROTECTED] wrote: Hi Jared, It looks like the problem now might be caused by the .click() on the p.close sort of butting into the add/remove class game where the .toggle() method was handling it just fine. I'm going to suggest losing the .toggle() altogether and swapping the class with your initial .click() on the accToggler class. Give this a whirl: script type=text/javascript $(function() { $('#ailment .accContent').hide().end() .find('.accToggler').click(function() { this.className = this.className == 'accToggler' ? 'accTogglerClose' : 'accToggler'; $(this).next().slideToggle(); }); $('#ailment p.close').click(function() { $(this).parent().slideUp() .prev().removeClass('accTogglerClose').addClass ('accToggler'); }); }); /script I think that should do it. --Karl _ Karl Swedbergwww.englishrules.comwww.learningjquery.com On May 25, 2007, at 2:06 PM, [EMAIL PROTECTED] wrote: Karl, that worked perfect. However, when I then click on the toggler that has been changed back, the class on it is not being changed. Here's the complete jQuery stuff, with the section you refined at the bottom: script type=text/javascript $(function() { $ ('#ailment').find('.accContent').hide().end().find ('.accToggler').click(function() { $(this).next().slideToggle(); }); $(.accToggler).toggle(function() { $(this).removeClass (accToggler).addClass(accTogglerClose); },function(){ $(this).removeClass (accTogglerClose).addClass(accToggler); }); $('#ailment p.close').click(function() { $(this).parent().slideUp() .prev().removeClass ('accTogglerClose').addClass('accToggler'); }); }); /script On May 25, 1:48 pm, Karl Swedberg [EMAIL PROTECTED] wrote: Hi Jared, It looks like there are a few ways you can tighten up your selectors, but the part that you're asking about could be changed from this ... $('#ailment').find('.close').click(function() { $('.accContent').slideUp(); $(this).prev('.accToggler').removeClass (accTogglerClose).addClass(accToggler); }); to this ... $('#ailment p.close').click(function() { $(this).parent().slideUp() .prev().removeClass('accTogglerClose').addClass('accToggler'); }); So, you're first traversing from the clicked element to its parent and sliding it up; then, you're traversing to the previous element -- in relation to the parent -- and swapping the classes on it. Hope that helps. --Karl _ Karl Swedbergwww.englishrules.comwww.learningjquery.com On May 25, 2007, at 11:24 AM, [EMAIL PROTECTED] wrote: I'm trying to have a close link in a div that is expanded by click on an h3 that is the toggler. The trick is, I need that close click to then change the class of the h3 that preceeds it, not all h3s on the page. h3 class=accToggler Title/h3 div class=accContent pContent/p p class=closeClose/p /div So far my script looks like this: script type=text/javascript $(function() { $ ('#ailment').find('.accContent').hide().end().find ('.accToggler').click(function() { $(this).next().slideToggle(); }); $(.accToggler).toggle(function() { $(this).removeClass
[jQuery] Re: Changing class on a preceding element by click link in another div
Ah ha! I think I see the problem, Jared: h3 class=accToggler Notice the space between accToggler and the quotation mark? I think that will kill it in IE, because it's looking for an exact match on the className property. If you can't avoid that space, you could switch the expression around a bit to say on click, basically, if the class is accTogglerClose, make it accToggler, otherwise make it accTogglerClose. So instead of this: this.className = this.className == 'accToggler' ? 'accTogglerClose' : 'accToggler'; you could do this: this.className = this.className == 'accTogglerClose' ? 'accToggler' : 'accTogglerClose'; You could also use a regular expression, testing to see if the class has Toggler at the end, with or without the space. Something like this: thisclassName = /Toggler\s?$/.test(this.className) ? 'accTogglerClose' : 'accToggler'; Or, if you want to go totally jQuery, you could do this instead of the above line: var $this = $(this); if ($this.is('.accToggler')) { $this.removeClass('accToggler').addClass('accTogglerClose'); } else { $this.removeClass('accTogglerClose').addClass('accToggler'); } Any of those should work, I think. Let me know which one you choose! :-) --Karl _ Karl Swedberg www.englishrules.com www.learningjquery.com On Jun 3, 2007, at 9:39 PM, [EMAIL PROTECTED] wrote: It seems IE6 and IE7, but not Firefox 2. Here's a link to the page: http://www.studioturn.com/staging/nr/ ailment/adult-add-adhd-symptoms-solutions-info.html The script is on a link in a purple colored box a bit down the page with the text The Difference Between ADD and ADHD On Jun 3, 7:32 pm, Karl Swedberg [EMAIL PROTECTED] wrote: Weird. Only in IE7? Can you point us to a page that has the code? It might help to see it in action and take a look at the HTML as well. --Karl _ Karl Swedbergwww.englishrules.comwww.learningjquery.com On Jun 3, 2007, at 6:04 PM, [EMAIL PROTECTED] wrote: It seems I spoke too soon. It appears that the very first instance of the .accToggler class does not have its class changed to the .accTogglerClose class when clicked in IE7. The .accContent expands, but the class does not change. My close link in the expanded content when clicked sets the class to the .accTogglerClose class and collapses the content. However, the background image of that close is then set to show a Close message, when it should show the Open message from the .accToggler settings. On May 27, 9:16 pm, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Perfect! Thank you! On May 25, 7:43 pm, Karl Swedberg [EMAIL PROTECTED] wrote: Hi Jared, It looks like the problem now might be caused by the .click() on the p.close sort of butting into the add/remove class game where the .toggle() method was handling it just fine. I'm going to suggest losing the .toggle() altogether and swapping the class with your initial .click() on the accToggler class. Give this a whirl: script type=text/javascript $(function() { $('#ailment .accContent').hide().end() .find('.accToggler').click(function() { this.className = this.className == 'accToggler' ? 'accTogglerClose' : 'accToggler'; $(this).next().slideToggle(); }); $('#ailment p.close').click(function() { $(this).parent().slideUp() .prev().removeClass('accTogglerClose').addClass ('accToggler'); }); }); /script I think that should do it. --Karl _ Karl Swedbergwww.englishrules.comwww.learningjquery.com On May 25, 2007, at 2:06 PM, [EMAIL PROTECTED] wrote: Karl, that worked perfect. However, when I then click on the toggler that has been changed back, the class on it is not being changed. Here's the complete jQuery stuff, with the section you refined at the bottom: script type=text/javascript $(function() { $ ('#ailment').find('.accContent').hide().end().find ('.accToggler').click(function() { $(this).next().slideToggle(); }); $(.accToggler).toggle(function() { $(this).removeClass (accToggler).addClass(accTogglerClose); },function(){ $(this).removeClass (accTogglerClose).addClass(accToggler); }); $('#ailment p.close').click(function() { $(this).parent().slideUp() .prev().removeClass ('accTogglerClose').addClass('accToggler'); }); }); /script On May 25, 1:48 pm, Karl Swedberg [EMAIL PROTECTED] wrote: Hi Jared, It looks like there are a few ways you can tighten up your selectors, but the part that you're asking about could be changed from this ... $('#ailment').find('.close').click(function() { $('.accContent').slideUp(); $(this).prev('.accToggler').removeClass (accTogglerClose).addClass(accToggler); });
[jQuery] Re: Changing class on a preceding element by click link in another div
Hi Jared, It looks like there are a few ways you can tighten up your selectors, but the part that you're asking about could be changed from this ... $('#ailment').find('.close').click(function() { $('.accContent').slideUp(); $(this).prev('.accToggler').removeClass (accTogglerClose).addClass(accToggler); }); to this ... $('#ailment p.close').click(function() { $(this).parent().slideUp() .prev().removeClass('accTogglerClose').addClass('accToggler'); }); So, you're first traversing from the clicked element to its parent and sliding it up; then, you're traversing to the previous element -- in relation to the parent -- and swapping the classes on it. Hope that helps. --Karl _ Karl Swedberg www.englishrules.com www.learningjquery.com On May 25, 2007, at 11:24 AM, [EMAIL PROTECTED] wrote: I'm trying to have a close link in a div that is expanded by click on an h3 that is the toggler. The trick is, I need that close click to then change the class of the h3 that preceeds it, not all h3s on the page. h3 class=accToggler Title/h3 div class=accContent pContent/p p class=closeClose/p /div So far my script looks like this: script type=text/javascript $(function() { $ ('#ailment').find('.accContent').hide().end().find ('.accToggler').click(function() { $(this).next().slideToggle(); }); $(.accToggler).toggle(function() { $(this).removeClass(accToggler).addClass(accTogglerClose); },function(){ $(this).removeClass(accTogglerClose).addClass(accToggler); }); $('#ailment').find('.close').click(function() { $('.accContent').slideUp(); $ (this).prev('.accToggler').removeClass(accTogglerClose).addClass (accToggler); }); }); /script Thanks in advance.
[jQuery] Re: Changing class on a preceding element by click link in another div
Karl, that worked perfect. However, when I then click on the toggler that has been changed back, the class on it is not being changed. Here's the complete jQuery stuff, with the section you refined at the bottom: script type=text/javascript $(function() { $ ('#ailment').find('.accContent').hide().end().find('.accToggler').click(function() { $(this).next().slideToggle(); }); $(.accToggler).toggle(function() { $(this).removeClass(accToggler).addClass(accTogglerClose); },function(){ $(this).removeClass(accTogglerClose).addClass(accToggler); }); $('#ailment p.close').click(function() { $(this).parent().slideUp() .prev().removeClass('accTogglerClose').addClass('accToggler'); }); }); /script On May 25, 1:48 pm, Karl Swedberg [EMAIL PROTECTED] wrote: Hi Jared, It looks like there are a few ways you can tighten up your selectors, but the part that you're asking about could be changed from this ... $('#ailment').find('.close').click(function() { $('.accContent').slideUp(); $(this).prev('.accToggler').removeClass (accTogglerClose).addClass(accToggler); }); to this ... $('#ailment p.close').click(function() { $(this).parent().slideUp() .prev().removeClass('accTogglerClose').addClass('accToggler'); }); So, you're first traversing from the clicked element to its parent and sliding it up; then, you're traversing to the previous element -- in relation to the parent -- and swapping the classes on it. Hope that helps. --Karl _ Karl Swedbergwww.englishrules.comwww.learningjquery.com On May 25, 2007, at 11:24 AM, [EMAIL PROTECTED] wrote: I'm trying to have a close link in a div that is expanded by click on an h3 that is the toggler. The trick is, I need that close click to then change the class of the h3 that preceeds it, not all h3s on the page. h3 class=accToggler Title/h3 div class=accContent pContent/p p class=closeClose/p /div So far my script looks like this: script type=text/javascript $(function() { $ ('#ailment').find('.accContent').hide().end().find ('.accToggler').click(function() { $(this).next().slideToggle(); }); $(.accToggler).toggle(function() { $(this).removeClass(accToggler).addClass(accTogglerClose); },function(){ $(this).removeClass(accTogglerClose).addClass(accToggler); }); $('#ailment').find('.close').click(function() { $('.accContent').slideUp(); $ (this).prev('.accToggler').removeClass(accTogglerClose).addClass (accToggler); }); }); /script Thanks in advance.
[jQuery] Re: Changing class on a preceding element by click link in another div
Hi Jared, It looks like the problem now might be caused by the .click() on the p.close sort of butting into the add/remove class game where the .toggle() method was handling it just fine. I'm going to suggest losing the .toggle() altogether and swapping the class with your initial .click() on the accToggler class. Give this a whirl: script type=text/javascript $(function() { $('#ailment .accContent').hide().end() .find('.accToggler').click(function() { this.className = this.className == 'accToggler' ? 'accTogglerClose' : 'accToggler'; $(this).next().slideToggle(); }); $('#ailment p.close').click(function() { $(this).parent().slideUp() .prev().removeClass('accTogglerClose').addClass('accToggler'); }); }); /script I think that should do it. --Karl _ Karl Swedberg www.englishrules.com www.learningjquery.com On May 25, 2007, at 2:06 PM, [EMAIL PROTECTED] wrote: Karl, that worked perfect. However, when I then click on the toggler that has been changed back, the class on it is not being changed. Here's the complete jQuery stuff, with the section you refined at the bottom: script type=text/javascript $(function() { $ ('#ailment').find('.accContent').hide().end().find ('.accToggler').click(function() { $(this).next().slideToggle(); }); $(.accToggler).toggle(function() { $(this).removeClass(accToggler).addClass(accTogglerClose); },function(){ $(this).removeClass(accTogglerClose).addClass(accToggler); }); $('#ailment p.close').click(function() { $(this).parent().slideUp() .prev().removeClass('accTogglerClose').addClass('accToggler'); }); }); /script On May 25, 1:48 pm, Karl Swedberg [EMAIL PROTECTED] wrote: Hi Jared, It looks like there are a few ways you can tighten up your selectors, but the part that you're asking about could be changed from this ... $('#ailment').find('.close').click(function() { $('.accContent').slideUp(); $(this).prev('.accToggler').removeClass (accTogglerClose).addClass(accToggler); }); to this ... $('#ailment p.close').click(function() { $(this).parent().slideUp() .prev().removeClass('accTogglerClose').addClass('accToggler'); }); So, you're first traversing from the clicked element to its parent and sliding it up; then, you're traversing to the previous element -- in relation to the parent -- and swapping the classes on it. Hope that helps. --Karl _ Karl Swedbergwww.englishrules.comwww.learningjquery.com On May 25, 2007, at 11:24 AM, [EMAIL PROTECTED] wrote: I'm trying to have a close link in a div that is expanded by click on an h3 that is the toggler. The trick is, I need that close click to then change the class of the h3 that preceeds it, not all h3s on the page. h3 class=accToggler Title/h3 div class=accContent pContent/p p class=closeClose/p /div So far my script looks like this: script type=text/javascript $(function() { $ ('#ailment').find('.accContent').hide().end().find ('.accToggler').click(function() { $(this).next().slideToggle(); }); $(.accToggler).toggle(function() { $(this).removeClass (accToggler).addClass(accTogglerClose); },function(){ $(this).removeClass (accTogglerClose).addClass(accToggler); }); $('#ailment').find('.close').click(function() { $('.accContent').slideUp(); $ (this).prev('.accToggler').removeClass(accTogglerClose).addClass (accToggler); }); }); /script Thanks in advance.