Вы забыли показать, как вызываете функцию toogle. Наверное, следующим образом:
<a onclick="toggle()" href="javascript:" class="up">Нажми меня</a>
В этом случае this внтури toggle указывает на window (глобальный объект, если быть точнее).
Почитайте статью:
http://javascript.ru/tutorial/object/thiskeyword
Можно сделать так:
<a onclick="toggle.call(this)" href="javascript:" class="up">Нажми меня</a>
А лучше так:
<script>
function toggle(toggler) {
var targetStyle = document.getElementById(toggler.getAttribute("data-target")).style;
targetStyle.display = targetStyle.display == "none" ? "block" : "none";
toggler.className = toggler.className == "up" ? "down" : "up";
}
</script>
<a href="#id1" class="up" onclick="toggle(this); return false;" data-target="id1">Нажми меня</a>
<div id="id1" style="display:none;">
<p>тут скрытый текст1</p>
</div>
<a href="#id2" class="up" onclick="toggle(this); return false;" data-target="id2">Нажми меня</a>
<div id="id2" style="display:none;">
<p>тут скрытый текст2</p>
</div>
http://javascript.ru/tutorial/events...z-obrabotchika
http://designformasters.info/posts/c...ta-attributes/
http://javascript.ru/cond
-------------
ну или вот так:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
</head>
<body>
<style>
.toggler {
display: block;
}
.up {
background-color: #afa;
}
.down {
background-color: #aaf;
}
#js .hidden {
display: none;
}
.text {
background-color: #fec;
}
</style>
<div>
<a href="#id1" class="toggler up" data-target="id1">Нажми меня</a>
<div id="id1" class="text hidden">
<p>тут скрытый текст1</p>
</div>
<a href="#id2" class="toggler up" data-target="id2">Нажми меня</a>
<div id="id2" class="text hidden">
<p>тут скрытый текст2</p>
</div>
</div>
<script>
document.documentElement.id = "js";
var utils = {
findClass: document.querySelectorAll ? function (CSSClass, root) {
return (root || document).querySelectorAll("." + CSSClass);
} : document.getElementsByClassName ? function (CSSClass, root) {
return (root || document).getElementsByClassName(CSSClass);
} : function (CSSClass, root) {
var list = (root || document).getElementsByTagName("*"), length = list.length, i = -1, elements = [], j = 0;
while (++i < length) {
if (this.hasClass(list[i], CSSClass)) {
elements[j++] = list[i];
}
}
return elements;
},
bind: document.addEventListener ? function (element, eventType, listener) {
element.addEventListener(eventType, listener, false);
return listener;
} : function (element, eventType, listener) {
var _listener = function () {
listener.call(element, window.event)
};
element.attachEvent("on" + eventType, _listener);
return _listener;
}
};
(function (classList) {
if (classList) {
utils.addClass = function (element, CSSClass) {
element.classList.add(CSSClass);
return element.className;
};
utils.removeClass = function (element, CSSClass) {
element.classList.remove(CSSClass)
return element.className;
};
utils.hasClass = function (element, CSSClass) {
return element.classList.contains(CSSClass);
};
} else {
utils.addClass = function (element, CSSClass) {
CSSClass = " " + CSSClass + " ";
if ((" " + element.className + " ").indexOf(CSSClass) == -1) {
element.className += " " + CSSClass;
}
return element.className;
};
utils.removeClass = function (element, CSSClass) {
element.className = (" " + element.className + " ").replace(" " + CSSClass + " ", " ");
return element.className;
};
utils.hasClass = function (element, CSSClass) {
return (" " + element.className + " ").indexOf(" " + CSSClass + " ") != -1;
};
}
})("classList" in document.createElement("div"));
(function (toggle) {
var togglers = utils.findClass("toggler"), i = togglers.length;
while (i--) {
utils.bind(togglers[i], "click", toggle);
}
})(function (event) {
var target = document.getElementById(this.getAttribute("data-target"));
if (utils.hasClass(this, "up")) {
utils.removeClass(this, "up");
utils.addClass(this, "down");
utils.removeClass(target, "hidden");
} else {
utils.removeClass(this, "down");
utils.addClass(this, "up");
utils.addClass(target, "hidden");
}
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
});
</script>
</body>
</html>
http://hacks.mozilla.org/2010/01/cla...n-firefox-3-6/
Эх… всего лишь ClassList API хотел попробовать
