простой show/hide для контента

[Андрей Параничев]

and50,
Сформулируйте задачу, я не понял что должен делать код.

[and50]

код работает правильно просто я не разбираясь в JS написал как мог и он получился очень громоздко.
при на жатии на i-ю ссылку должно поднятся вверх и открытся i-е меню, открытся i-й div и спрятатся i- я ссылка.
заранее спасибо

[M.C.]

Андрей, пытаюсь сделать как тут: http://anton.shevchuk.name/wp-demo/j...ccordion1.html
там справа есть иконка, когда закрыто, она показывает вниз, когда открыто - наверх (это один gif-рисунок, просто он стилями меняет свое положение)

вот как я представил код скрипта:

// Обворачиваем функцию toggle в локальное замыкание:
        var toggle = function() {
            // Ссылка на текущий открытый div:
            var currentDiv = null;
            // Ссылка на текущий класс:
            var currentClass = null;
 
            // Функция для "раскрытия" элемента:
            function open(divElement, classElement) {
            	// Запоминаем и прячем класс:
            	currentClass = classElement;
            	currentClass = document.getElementByClass("bg_headers");
                // Тут можно добавить эффект "плавного" открытия:
                divElement.style.display = "block";
                currentDiv = divElement;
            }
 
            // Функция для "закрытия" элемента:
            function close(divElement, classElement) {
            	// Показываем класс и "забываем":
                currentClass = document.getElementbyClass("bg_headers_active");
                currentAnchor = null;

                // Тут можно добавить эффект "плавного" закрытия:
                divElement.style.display = "none";
                currentDiv = null;
            }
 
            // Возвращаем функцию, которая будет вызываться по toggle()
            return function(divID, classID) {
                // Получаем элемент из DOM
                var divElement = document.getElementById(divID);
                var classElement = document.getElementByClass(classID)
                // Если такой есть:
                if (divElement) {
                    // Если уже открыт этот div, то просто закрываем.
                    if (divElement === currentDiv) {
                        close(currentDiv, currentClass);
                    // Если открыт другой div, то закрываем и открываем текущий:
                    } else if(currentDiv != null) {
                        close(currentDiv, currentClass);
                        open(divElement, classElement);
                    // Иначе - просто открываем:
                    } else {
                        open(divElement, classElement);
                    }
                }
            }
        // Вызываем нашу "обертку", теперь toggle() вызывает функцию, описанную по "return"
        }();

вот что у меня в CSS:

.bg_headers {
	background: #e9e7e7 url(../images/icons/arrow-square.gif) no-repeat right -51px;
	border: solid 1px #c4c4c4;
	padding: 3px;
}
.bg_headers:hover {
	background-color: #e3e2e2;
}
.bg_headers_active {
	background-position: right 5px;
}

но что-то не работает

[Андрей Параничев]

M.C.,
Вам нужно примерно следующее:

// Обворачиваем функцию toggle в локальное замыкание:
        var toggle = function() {
            // Ссылка на текущий открытый div:
            var currentDiv = null;
            // Текущая ссылка:
            var currentAnchor = null;
 
            // Функция для "раскрытия" элемента:
            function open(divElement, linkElement) {
                // Запоминаем и прячем ссылку:
                currentAnchor = linkElement;
                // Прибавляем "_active" к имени класса:
                currentAnchor.className += "_active";
 
                // Тут можно добавить эффект "плавного" открытия:
                divElement.style.display = "block";
                currentDiv = divElement;
            }
 
            // Функция для "закрытия" элемента:
            function close(divElement) {
                // Убираем "_active" и "забываем":
                currentAnchor.className = currentAnchor.className.replace("_active", "");
                currentAnchor = null;
 
                // Тут можно добавить эффект "плавного" закрытия:
                divElement.style.display = "none";
                currentDiv = null;
            }
 
            // Возвращаем функцию, которая будет вызываться по toggle()
            return function(divID, link) {
                // Получаем элемент из DOM
                var divElement = document.getElementById(divID);
                // Если такой есть:
                if (divElement) {
                    // Если уже открыт какой-то div - закрываем.
                    if(currentDiv != null) close(currentDiv);
                    // Открываем вызваный.
                    open(divElement, link);
                }
            }
        // Вызываем нашу "обертку", теперь toggle() вызывает функцию, описанную по "return"
        }();

Только учтите, что картинка должна находиться внутри ссылки, и стили прописываются для этой ссылки.

[M.C.]

а если стиль для тега <td> ? я так понял в этом и проблема была, что я сделал для тега стиль, а тут скрипт для ссылки...

[M.C.]

подумал немного, видимо для <td> тоже надо указывать id, чтобы знать какому <td> в данный момент присваивать тот или иной класс?

[Андрей Параничев]

Выложите html кусок, который у вас под эту задачу. Я же не могу догадаться, какой именно элемент вы меняете при открытии\закрытии элемента.

В том примере, который вы давали, сверху большая ссылка, внутри которой уже отображается изображение. Ссылку можно сделать блоковым элементом и задать ей размеры через css:

.класс_ссылки {
    display: block;
    width: 100%;
    padding: 6px 0 6px 15px;
}

[M.C.]

да, извините, вот кусок кода, для которого это должно работать:

<table width="100%">
<tr><td id="td1" class="bg_headers">
<a href="#" onclick="toggle('div1')">Ссылка 1</a>
</td></tr>
</table>
<div id="div1" class="myDiv">
Содержание 1
</div>


<table width="100%">
<tr><td id="td2" class="bg_headers">
<a href="#" onclick="toggle('div2')">Ссылка 2</a>
</td></tr>
</table>
<div id="div2" class="myDiv">
Содержание 1
</div>


<table width="100%">
<tr><td id="td3" class="bg_headers">
<a href="#" onclick="toggle('div3')">Ссылка 3</a>
</td></tr>
</table>
<div id="div3" class="myDiv">
Содержание 3
</div>

это стили:

.bg_headers {
	background: #e9e7e7 url(../images/icons/arrow-square.gif) no-repeat right -51px;
	border: solid 1px #c4c4c4;
	padding: 3px;
}
.bg_headers:hover {
	background-color: #e3e2e2;
}
.bg_headers_active {
	background-position: right 5px;
}

[M.C.]

M.C.,
Вам нужно примерно следующее:

Только учтите, что картинка должна находиться внутри ссылки, и стили прописываются для этой ссылки.

попробовал этот вариант, не работает хотя в этом случае именно для ссылки и с тем вариантом стиля, как вы указали ниже... видимо в коде что-то не так, но знаний не хватает понять где чего.... (а вернее их отсутствие).

[Андрей Параничев]

M.C.,
Я предлагал вот такой вариант. Если использовать таблицы принципиально, то могу объяснить, как исправить/переделать. Дело в том, что я написал сначала просто как пример, а сейчас - под конкретную задачу, и оба варианта не универсальны.