<!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
>