<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>A Pen by tahjay</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
</script>
<style>
</style>
</head> <h2>JQUERY</h2>
<body> <h1>This panel slides up and down using CSS and JAVA
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">This panel would be helpful on a website for people who are selling products, the drop down box would help list product specs and price.</div>
<div id="flip1">Click to slide up panel</div>
<div id="panel1">Hello world!</div>
<div id="flip2">Click to slide Down panel</div>
<div id="panel2">Hello world!</div>
<h2> <button>Hide</button>
<p>This is a paragraph with little content.</p></h2>
<button>Click to fade in boxes</button><br><br>
<h4><div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div> </h4>
</h1>
</body>
</html>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/-_-Tahj_B_LIT-_-/a-pen-by-tahjay-MbgopP */
body {
background-image:url("http://www.wildtextures.com/wp-content/uploads/wildtextures-seamless-wood-planks-II.jpg")
}
h1 {
color: white;
border-style: double;
border-radius: 20px;
border-color: blue;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#panel, #flip {
padding: 5px;
text-align: center;
background-color: black;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
h2 {
text-align: center;
font-size: 50px;
color: white;
}
#panel1, #flip1 {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel1 {
padding: 50px;
}
#panel2, #flip2 {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel2 {
padding: 50px;
display: none;
}
/*Downloaded from https://www.codeseek.co/-_-Tahj_B_LIT-_-/a-pen-by-tahjay-MbgopP */
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("fast");
});
});
$(document).ready(function(){
$("#flip1").click(function(){
$("#panel1").slideUp("slow");
});
});
$(document).ready(function(){
$("#flip2").click(function(){
$("#panel2").slideDown("slow");
});
});
$(document).ready(function(){
$("button").click(function(){
$("p").hide("fast", function(){
alert("The paragraph is now hidden");
});
});
});
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
jQuery
v3.1.1
