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");
});
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.
