html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- Created by Ginfio-->
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<button onclick ="hideshowj()" class="hideshow">
( Click here ) Learning Javascript 😀</button>
<div id="content">WOW, JavaScript is so confusing. especially the things i haven't gotten to yet.'</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* Created by Ginfio */
body {
padding: 10px;
}
#content{
display:none;
background-color: maroon;
font-size:20px;
color: white;
border:1px solid blue;
width: 300px;
}
.hideshow{
font-size:15px;
width:302px;
background-color: lime;
border:1px solid blue;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* Created by Ginfio
function hideshowj(){
var x = document.getElementById("content");
if (x.style.display==="none")
{x.style.display="block";}
else{x.style.display="none";}
}
*/
/* Modified by Rademaker Robin
if you press now Hat it does is change automatically to block, next time you press it changed back
*/
function hideshowj(){
var x = document.getElementById("content");
if (x.style.display=="block")
{x.style.display="none";}
else{x.style.display="block";}
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run