Скрытие/ Открытие блока DIV по нажатию на PNG картинку
Есть блок DIV с текстом и своим CSS. Вот в этой теме похожее обсуждалось http://javascript.ru/forum/misc/2238...akryt-ego.html
Но реально сделать вот так. Блока сразу нет, но есть PNG картинка, по клику на которую открывается блок, А картинка пропадает. |
dunakov,
для этого даже js не нужен. |
Цитата:
Другой вариант без использования JS не могу представить. |
Цитата:
|
А JQuery toggle ?
И суть в том, что по клику на картинку , картинка пропадает, но появляется Div |
<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> |
Или решение Рони без 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> |
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> |
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> |
Часовой пояс GMT +3, время: 02:19. |