Как сделать смену картинки на текст (в ссылке, когда она активна)?

Question

[sergo573]

Здравствуйте, сложилась такая проблема, никак не соображу как выполнить данное действие...
Имеется ссылка "a", при нажатии на которую появляется и исчезает div блок.
Нужно сделать так, что бы при том когда div блок есть, то на этой ссылке должен быть текст, а когда div блок скрыт, то на месте текста должна быть картинка...

Если что-то непонятно расписал, спрашивайте :)

Comments

[Ankhena]

Если что-то непонятно расписал, спрашивайте :)

Всё понятно, кроме одного: код где?
Рабочий и в песочнице jsfiddle.net или аналоге.

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

Answer 1

[Стефан]

тык

Но всегда остается вопрос, почему вы вместо кнопок используете ссылки?

Comments

[sergo573]

Отлично,! :)
А если без secret_div? Потому что у меня эта функция работает другим скриптом...

[Стефан]

sergo573, ну суть та же, можете проверять свойство display у элемента, вместо класса

[Ankhena]

Стефан, зачем его проверять, если можно в той же функции дописать смену класса у ссылки.
https://jsfiddle.net/uvex1c0f/

Но всегда остается вопрос, почему вы вместо кнопок используете ссылки?

Обычно так делают для доступности при отвалившемся js.

[sergo573]

Ankhena, Не могу никак связать со своим скриптом...
Моя кнопка:

<a class="k_nazad" href="javascript:void(0)" onclick="showHide('vybor')"><span class="nazad_k">Назад</span></a>

Мой код, который отвечает за скрытие и появление div блока:

<script type="text/javascript">
function showHide(element_id) {
if (document.getElementById(element_id)) { 
var obj = document.getElementById(element_id);
if (obj.style.display != "none") { 
obj.style.display = "none";
}
else obj.style.display = "block";
}
else alert("Элемент с id: " + element_id + " не найден!"); 
}
</script>

[Стефан]

Ankhena, как хороший вариант, чет не подумал

[Стефан]

sergo573, насколько мне помниться то через this элемент который вызвал обработчик можно получить

<script type="text/javascript">
function showHide(element_id) {
if (document.getElementById(element_id)) { 
var obj = document.getElementById(element_id);
if (obj.style.display != "none") { 
obj.style.display = "none";
this.innerHTML = "блабла бла"
}
else obj.style.display = "block";
this.innerHTML = "блабла бла"
}
else alert("Элемент с id: " + element_id + " не найден!"); 
}
</script>

[Стефан]

sergo573, Но лучше реализуйте как Ankhena посоветовал, проще и лаконичней выходит

[Ankhena]

Стефан, вы меня извините, но ваш скрипт и инлайн онклик можно только отправить куда-нибудь погулять. Я постаралась выразиться вежливо.

Возьмите вариант из примеров.

[sergo573]

Всем огромное спасибо, использовал код Ankhena,

[sergo573]

Стефан, Ankhena, Тут появилась ещё одна проблемка... :)
У меня в этом div блоке которое скрывается есть select с id heyhey, в котором множество option, так вот, при выборе любого option этот же div скрывался, это делалось кодом:

<script>
    jQuery(document).ready(function() {
   jQuery("#heyhey").change(function() {
      if(jQuery(this).find("option:selected").val()) {
         jQuery(".vybor").hide();
      }
   });
});
</script>

Теперь после вставления вашего кода, всё работает при нажатии на кнопку, но если выбрать option, то div блок скрывается, и при нажатии на кнопку больше не появляется...

[Ankhena]

sergo573, вот же ш каша-то какая..

Hide в JQ дописывает элементу инлайново display none. А у инлайновых стилей выше приоритет.
Значит, нужно всё переписать на классы.

[sergo573]

Ankhena, Спасибо, исправил эту строку, всё заработало :)
jQuery(".vybor").addClass('vybor_open');