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">
> > >>> <p>Content</p>
> > >>> <p class="close">Close</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.
