Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.04.2017, 20:02
Интересующийся
Отправить личное сообщение для dunakov Посмотреть профиль Найти все сообщения от dunakov
 
Регистрация: 12.05.2016
Сообщений: 22

Скрытие/ Открытие блока DIV по нажатию на PNG картинку
Есть блок DIV с текстом и своим CSS. Вот в этой теме похожее обсуждалось При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его

Но реально сделать вот так. Блока сразу нет, но есть PNG картинка, по клику на которую открывается блок, А картинка пропадает.
Ответить с цитированием
  #2 (permalink)  
Старый 20.04.2017, 20:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,791

dunakov,
для этого даже js не нужен.
Ответить с цитированием
  #3 (permalink)  
Старый 20.04.2017, 21:14
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,482

Сообщение от рони Посмотреть сообщение
dunakov,
для этого даже js не нужен.
img:focus?
Другой вариант без использования JS не могу представить.
Ответить с цитированием
  #4 (permalink)  
Старый 20.04.2017, 21:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,791

Сообщение от Nexus
Другой вариант без использования JS
:checked + img
Ответить с цитированием
  #5 (permalink)  
Старый 20.04.2017, 22:09
Интересующийся
Отправить личное сообщение для dunakov Посмотреть профиль Найти все сообщения от dunakov
 
Регистрация: 12.05.2016
Сообщений: 22

А JQuery toggle ?

И суть в том, что по клику на картинку , картинка пропадает, но появляется Div
Ответить с цитированием
  #6 (permalink)  
Старый 20.04.2017, 22:17
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,482

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="wrapper">
	<img onclick="$(this).hide().parents('.wrapper').find('.hidden').show();" alt="Image"/>
	<div class="hidden" style="display:none;">Hidden content</div>
</div>
Ответить с цитированием
  #7 (permalink)  
Старый 20.04.2017, 22:26
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,482

Или решение Рони без js (https://jsfiddle.net/ydw9owgv/):
<style>
.wrapper .hidden,.wrapper input,.wrapper input:checked~label{
  display:none;
}
.wrapper input:checked~.hidden{
  display:block;
}
</style>
<div class="wrapper">
  <input type="checkbox" id="checkbox-1"/>
  <label for="checkbox-1"><img alt="Image"/></label>
	<div class="hidden">Hidden content</div>
</div>
Ответить с цитированием
  #8 (permalink)  
Старый 20.04.2017, 22:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,791

dunakov,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .wrapper .hide, .wrapper  :checked + label img, .wrapper input{
      display:  none;
    }
    .wrapper  :checked ~ .hide {
      display: block;
    }

  </style>

</head>

<body>

<div class="wrapper">
  <input id="mic" name="" type="checkbox">
  <label for="mic"><img  src="http://im.haberturk.com/2013/02/06/ver1360145679/817721_detay.jpg" alt="Image" /></label>
  <div class="hide">
  <label for="mic"><img  src="http://blagoveshensk.bezformata.ru/content/image62720071.jpg" alt="Image" /></label>
  Hidden content</div>
</div>


</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 20.04.2017, 22:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,791

Nexus,
[HTML  run]тут ваш код[/HTML]
Ответить с цитированием
  #10 (permalink)  
Старый 20.04.2017, 22:43
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,482

Сообщение от рони Посмотреть сообщение
Nexus,
[HTML  run]тут ваш код[/HTML]
Спасибо за информацию.

<!DOCTYPE html> 
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .wrapper .hide,.wrapper :checked+img,.wrapper input{
		display:none;
    }
    .wrapper :checked~.hide{
		display:block;
    }
  </style>
</head>
<body>

<div class="wrapper">
	<label>
		<input type="checkbox"/>
		<img src="http://im.haberturk.com/2013/02/06/ver1360145679/817721_detay.jpg" alt="Image" />
		<div class="hide">
			<img  src="http://blagoveshensk.bezformata.ru/content/image62720071.jpg" alt="Image" />
			Hidden content
		</div>
	</label>
</div>
 
</body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
открытие и скрытие div при выборе другого div veetal Элементы интерфейса 8 25.08.2015 16:07
Одновременное скрытие одного блока и открытие другого. Помогите решить задачу. Янковиц Элементы интерфейса 1 02.01.2015 23:43
Открытие нового окна по нажатию на картинку psihoz26 Общие вопросы Javascript 2 08.07.2014 16:02
Скрытие блока div и его составляющих pomuk123 Events/DOM/Window 6 14.02.2011 09:31
Скрытие, показ определённого div блока. Flashton Events/DOM/Window 5 11.04.2010 22:44