THE HTML PAGE
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/scripts.js"></script>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<h1>jQuery</h1>
<section id="myText">
<p>The quick brown fox jumps over the lazy dog.</p>
<p>The quick brown fox jumps over the lazy dog.</p>
<p>The quick brown fox jumps over the lazy dog.</p>
<p>The quick brown fox jumps over the lazy dog.</p>
<p>The quick brown fox jumps over the lazy dog.</p>
<p>The quick brown fox jumps over the lazy dog.</p>
</section>
<p id="showHide">Hide</p>
<p id="result"></p>
</body>
</html>
THE js/scripts.js PAGE
// JavaScript Document
$(document).ready(function(){
$("#showHide").click(function(){
$("#myText").fadeToggle( 5000, function() {
if($("#myText").is(":hidden")){
$("#showHide").html("Show");
}else{
$("#showHide").html("Hide");
}
});
$( "#myText" ).promise().done(function() {
$( "#result" ).append( " Finished! " );
});
});
});
/*$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
})*/
THE CSS Page (css/styles.css)
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}
body{
padding-left: 30px;
}
fieldset{
width:400px;
margin:15px auto;
border:thin solid #06F;
background-color:#E1DEFE;
position:relative;
padding-top:85px;
}
fieldset legend{
position:absolute;
top:20px;
left:0;
width:385px;
background-color:#06F;
color:white;
padding:5px 5px 5px 10px;
font-size:24px;
}
fieldset p label{
width:190px;
float:left;
font-size:18px;
padding-top:5px;
}
fieldset p input{
width:175px;
float:left;
clear:right;
padding:5px;
font-size:18px;
}
fieldset p{
height:45px;
margin-left:10px;
}
fieldset p:last-child{
margin-bottom:50px;
}
fieldset p button.button {
border-radius: 10px;
background-color: #AD9EFE;
border:thin solid #06F;
color: #FFFFFF;
text-align: center;
font-size: 24px;
padding: 5px;
width: 250px;
transition: all 0.5s;
cursor: pointer;
margin: 20px 15%;
}
fieldset p button:hover{
/*background-color:#06F;*/
background: rgba(183,222,237,1);
background: -moz-linear-gradient(top, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 50%, rgba(33,180,226,1) 51%, rgba(183,222,237,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(183,222,237,1)), color-stop(50%, rgba(113,206,239,1)), color-stop(51%, rgba(33,180,226,1)), color-stop(100%, rgba(183,222,237,1)));
background: -webkit-linear-gradient(top, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 50%, rgba(33,180,226,1) 51%, rgba(183,222,237,1) 100%);
background: -o-linear-gradient(top, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 50%, rgba(33,180,226,1) 51%, rgba(183,222,237,1) 100%);
background: -ms-linear-gradient(top, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 50%, rgba(33,180,226,1) 51%, rgba(183,222,237,1) 100%);
background: linear-gradient(to bottom, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 50%, rgba(33,180,226,1) 51%, rgba(183,222,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed', GradientType=0 );
}
fieldset p button.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
fieldset p button.button span:after {
content: '\00bb';
/*content: ':)';*/
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
fieldset p button.button:hover span {
padding-right: 25px;
}
fieldset p button{
}
fieldset p button.button:hover span:after {
opacity: 1;
right: 0;
}
p.radio{
height:30px;
}
p.radioHeading,p.checkboxHeading{
font-weight:bold;
height:35px;
padding-top:20px;
}
p.checkbox{
height:30px;
}