Скрытие/ Открытие блока 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>
|
Сделал через Js
<script>
function hideOf(){
$('.hideOf').toggle();
};
</script>
<script>
function hideOf1(){
$('.hideOf1').toggle();
};
</script>
<script>
function hideOf2(){
$('.hideOf2').toggle();
};
</script>
И кнопочки <button value ="clickBlock1" onclick="hideOf()"><img src="menu/button-6112.png" width="100" height="100" alt="1"> </button> <button value ="clickBlock2" onclick="hideOf1()"><img src="menu/button-8819.png" width="100" height="100" alt="1"> </button> <button value ="clickBlock3" onclick="hideOf2()"><img src="menu/button-82730.png" width="100" height="100" alt="1"> </button> Но теперь нужно как то сделать, чтобы по клику кнопки пропадали |
Цитата:
Только зачем юзать toggle, если повторно нажать на кнопку просто не сможешь?
<button value="clickBlock1" onclick="$(this).hide();$('.hideOf').toggle();">
<img src="menu/button-6112.png" width="100" height="100" alt="1"/>
</button>
<button value="clickBlock2" onclick="$(this).hide();$('.hideOf1').toggle();">
<img src="menu/button-8819.png" width="100" height="100" alt="1"/>
</button>
<button value="clickBlock3" onclick="$(this).hide();$('.hideOf2').toggle();">
<img src="menu/button-82730.png" width="100" height="100" alt="1"/>
</button>
|
| Часовой пояс GMT +3, время: 06:36. |