<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css display:none, display:block</title>
<script src="../jquery/3.6.0/jquery.min.js"></script>
<style type="text/css">
.geovindu {
display: none;
}
</style>
</head>
<body>
<div class="container">
<button class="button">Click</button>
<div class="front">front page</div>
<div class="geovindu">
This is a paragraph with little content.<br/> This is another small paragraph.
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.button').click(function() {
console.log("block1");
//let item = $(this).closest('geovindu');
//let item = $("#item").css("display", "none");
let items = document.querySelector('div.geovindu');
console.log(items);
if (getComputedStyle(items).display == 'none') {
console.log("none");
$(".geovindu").css("display", "block");
//item.show();
//item.css('display', 'block');
console.log("block");
} else if (getComputedStyle(items).display == 'block') {
console.log("block d");
//item.hide();
$(".geovindu").css("display", "none");
//item.css('display', 'none');
console.log("ok");
}
});
});
</script>
</body>
</html>