Item: A Pen by tahjay
Rating: 3.4
Author: -_-Tahj_B_LIT-_-

2 Downloads
32 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

<!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);
    });
});

Comments

More from -_-Tahj_B_LIT-_-

A Pen by tahjay

Technologies

Comments

More from -_-Tahj_B_LIT-_-

home page

home page

Events

About

You Might Also Like

Circular Navigation

theme anyone 2

subscription_landing

header experiment

ATK Button System

Two Way Data Binding in Plain Vanilla JavaScript

Sophia Kartoffelbrei

Special Offers