Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.06.2017, 13:01
Новичок на форуме
Отправить личное сообщение для lolopop12 Посмотреть профиль Найти все сообщения от lolopop12
 
Регистрация: 13.06.2017
Сообщений: 2

Смена картинки и раскрывающийся текст при клике
Здравствуйте. Только изучать начал и наткнулся на такую проблему: не знаю как добавить картинку(картинка со стрелкой вниз) и текст так, чтобы при клике на Текст с картинкой("Сколько стоят ваши услуги"), та картинка заменялась на другую(картинка со стрелкой вверх) и раскрывался текст"услуги сантехника.."
<div onClick="expandit(this)"><p style="cursor:pointer" >Показать/скрыть детальную информацию о о блоке текста №1</p>
<img src="img/arrow.png" alt=""></div>
 
<span style="display:none" style=&{head};>
Здесь пишем/вставляем блок текста №1
</span>
<p style="cursor:pointer" onClick="expandit(this)">Показать/скрыть детальную информацию о о блоке текста №2</p>
<span style="display:none" style=&{head};>
Здесь пишем/вставляем блок текста №2
</span><p style="cursor:pointer" onClick="expandit(this)">Показать/скрыть детальную информацию о о блоке текста №3</p>
<span style="display:none" style=&{head};>
Здесь пишем/вставляем блок текста №3
</span><p style="cursor:pointer" onClick="expandit(this)">Показать/скрыть детальную информацию о о блоке текста №4</p>
<span style="display:none" style=&{head};>
Здесь пишем/вставляем блок текста №4
</span>

<script>
<!--
var ns6=document.getElementById&&!document.all?1:0
var head="display:''"
var folder=''
function expandit(curobj){
folder=ns6?curobj.nextSibling.nextSibling.style:document.all[curobj.sourceIndex+1].style
if (folder.display=="none")
folder.display=""
else
folder.display="none"
}
//-->
</script>
Изображения:
Тип файла: png Снимок.PNG (51.2 Кб, 5 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 13.06.2017, 13:11
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Это ради учебы или может быть использовать CSS анимацию можно?
Ответить с цитированием
  #3 (permalink)  
Старый 13.06.2017, 13:15
Новичок на форуме
Отправить личное сообщение для lolopop12 Посмотреть профиль Найти все сообщения от lolopop12
 
Регистрация: 13.06.2017
Сообщений: 2

Сообщение от laimas Посмотреть сообщение
Это ради учебы или может быть использовать CSS анимацию можно?
Ради учебы, но не совсем понял как с помощью анимации можно
Ответить с цитированием
  #4 (permalink)  
Старый 13.06.2017, 13:30
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

В современных браузерах поддерживающих HTML5, CSS3 доступна анимация. В сети много о ней написано, о ее параметрах, даны примеры. В общем сложного нет, чтобы нельзя было понять.

А если страница в UTF, то стрелку рисовать не стоит, это может быть символ - ▼ (есть и ˅), который разворачивать анимацией.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Обьединить скрипт смены картинки при навидении и клике на картинку Андрей111111 Оффтопик 6 25.05.2017 15:24
Смена local.storage при клике (Wordpress) AngryTom jQuery 1 11.04.2017 11:02
Увеличение картинки при клике - самый простой способ Lagshmivar Firefox/Mozilla 16 23.02.2017 17:03
раскрывающийся и закрывающися текст при клику hardware jQuery 4 19.08.2013 16:16