<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
How to create canvas of the same
size as a div in a grid?
</title>
<style>
.container {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 100px;
height: 100%;
width: 100%;
text-align: center;
}
.toggle-outer{
height: 20px;
width: 50px;
border-radius: 20px;
border: 1px solid #ccc;
background-color: #f4f4f4;
margin: auto;
position: relative;
transition: all 0.3s ease-in;
cursor: pointer;
}
.toggle-outer.checked{
background-color: blue;
}
.toggle-inner{
height: 18px;
width: 18px;
border-radius: 50%;
position: absolute;
left: 0;
background-color: #fff;
border: 1px solid #ccc;
transition: all 0.3s ease-in;
}
.toggle-outer.checked .toggle-inner{
left: 30px;
}
input[type="checkbox"]{
display: none;
}
#toggleLabel{
cursor: pointer;
}
#result{
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Toggle the div element by clicking the below
toggle button.
</h3>
<div class="toggle-outer">
<div class="toggle-inner">
<input type="checkbox" id="toggle">
</div>
</div>
<label id="toggleLabel" for="toggle">
ON
</label>
<div id="result">
<h3>
This is the div that toggles on click <br/>
to the above toggle button.
</h3>
</div>
</div>
<script src=
integrity=
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous"
referrerpolicy="no-referrer">
</script>
<script>
$(document).ready(() => {
$('.toggle-outer').click(function(){
$(this).toggleClass('checked');
const res = $('#result');
if(res.css('display') === 'none'){
$('#toggle').attr('checked', true);
$('#toggleLabel').text('OFF');
res.css('display', 'block');
}
else{
$('#toggle').attr('checked', false);
$('#toggleLabel').text('ON');
res.css('display', 'none');
}
})
});
</script>
</body>
</html>