XYZ CODE: How to create a drop down effect in your blogger in 5 minutes

How to create a drop down effect in your blogger in 5 minutes

<Back

Example

copy paste the following code in the HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>

$(document).ready(function(){
$(".ani").click(function() {
var id = $(this).attr("id") + "here";
$('#'+id).slideToggle("slow");
$("#prompt").css("display","none");
});
});

$(document).ready(function(){
$("#prompt").click(function() {
$(this).slideToggle("slow");
});
});
</script>

<style>
img{border:0;}
.ani {
width: 148px;
height: 20px;
background:#F5F3EE;
border-style: groove;
position: relative;
}

.ani:hover {
background:white;
}

.left, .right {
float:left;
width:150px;
border-style: groove;
}

.panel {
width:623px;
display: none;
position: relative;
clear: left;
}

#prompt {
width: 50px;
height: 50px;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0% {top:0px;left:0px;}
25% {top:0px;left:200px;}
50% {top:20px;left:200px;}
75% {top:0px;left:200px;}
100% {top:0px;left:0px;}
}

/* Standard syntax */
@keyframes example {
0% {top:0px;left:0px;}
25% {top:0px;left:200px;}
50% {top:20px;left:200px;}
75% {top:0px;left:200px;}
100% {top:0px;left:0px;}
}

</style>

<img id="prompt" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbHEqcEoo3JE7U9hyphenhyphencJgc8VJPNw9dToS4KmiOCLi8mMAK-AgUW9-PxVXpH9A5G7uO6g-Q6WngU85t6AMR06rU6jHT-NH4pIH9NTQEGeYclk6zfdbsRF8qDHQ_M7PDlhgx5IbmuI_WCdgEX/s200/clickdown.png" />
<br />
<br />
<div class="left">
<div class="ani" id="FileReader">
<b>FileReader</b></div>
<div class="ani" id="BufferedReader">
<b>BufferedReader</b></div>
</div>
<div class="right">
<div class="ani" id="FileWriter">
<b>FileWriter</b></div>
<div class="ani" id="BufferedWriter">
<b>BufferedWriter</b></div>
</div>
<div class="left">
<div class="ani" id="FileInputStream">
<b>File<span style="color: red;">Input</span>Stream</b></div>
<div class="ani" id="BufferedInputStream">
<b>Buffered<span style="color: red;">Input</span>Stream</b></div>
<div class="ani" id="ObjectInputStream">
<b>Object<span style="color: red;">Input</span>Stream</b></div>
</div>
<div class="left">
<div class="ani" id="FileOutputStream">
<b>File<span style="color: red;">Output</span>Stream</b></div>
<div class="ani" id="BufferedOutputStream">
<b>Buffered<span style="color: lime;">Output</span>Stream</b></div>
<div class="ani" id="ObjectOutputStream">
<b>Object<span style="color: lime;">Output</span>Stream</b></div>
</div>
<div class="panel" id="FileInputStreamhere">
FileInputStream Example code
<pre>cat ReadData.java
import java.io.*;

public class ReadData {
public static void main(String[] args) {
try(FileInputStream isr = new FileInputStream("test.txt");) {
int data = 0;
while( (data = isr.read()) != -1) {
System.out.print((char)data);
}
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}

cat test.txt
ABBhello OCPJP!ABBhello OCPJP!ABBhello OCPJP!

javac ReadData.java
java ReadData
ABBhello OCPJP!ABBhello OCPJP!ABBhello OCPJP!

chmod -r test.txt
java ReadData
java.io.FileNotFoundException: test.txt (Permission denied)
at java.io.FileInputStream.open(Native Method)
at java.io.FileInputStream.<init>(FileInputStream.java:138)
at java.io.FileInputStream.<init>(FileInputStream.java:93)
at ReadData.main(ReadData.java:5)
chmod +r test.txt
java ReadData
ABBhello OCPJP!ABBhello OCPJP!ABBhello OCPJP!
</pre>
</div>
<div class="panel" id="BufferedInputStreamhere">
<pre>BufferedInputStreamhere
</pre>
</div>
<div class="panel" id="FileOutputStreamhere">
FileOutputStream Example.
<pre>
cat WriteData.java
import java.io.*;
import java.nio.charset.*;
public class WriteData
{
public static void main(String args[]) throws FileNotFoundException
{
try(FileOutputStream fos = new FileOutputStream("test.txt");) {
fos.write('A');
byte[] buf = new byte[]{'B', 66};
fos.write(buf, 0, buf.length);
String hello = "hello OCPJP!";
fos.write(hello.getBytes(StandardCharsets.UTF_8));
//one byte at a time, no need to flush
//fos.flush();
//try with resources, no need to close
//fos.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}

javac WriteData.java
java WriteData
cat test.txt
ABBhello OCPJP!
java WriteData
cat test.txt
ABBhello OCPJP!
vi WriteData.java
chmod -w test.txt
java WriteData
java.io.FileNotFoundException: test.txt (Permission denied)
at java.io.FileOutputStream.open(Native Method)
at java.io.FileOutputStream.<init>(FileOutputStream.java:213)
at java.io.FileOutputStream.<init>(FileOutputStream.java:101)
at WriteData.main(WriteData.java:7)
rm test.txt
override r--r--r-- homenetwork/staff for test.txt? y
java WriteData
cat test.txt
ABBhello OCPJP!
vi WriteData.java
grep test.txt WriteData.java
try(FileOutputStream fos = new FileOutputStream("test.txt",true);) {
echo "appened set to true"
appened set to true
javac WriteData.java
java WriteData
cat test.txt
ABBhello OCPJP!ABBhello OCPJP!
java WriteData
cat test.txt
ABBhello OCPJP!ABBhello OCPJP!ABBhello OCPJP!
</pre>
</div>
<div class="panel" id="BufferedOutputStreamhere">
<pre>BufferedOutputStreamhere
</pre>
</div>
<div class="panel" id="FileReaderhere">
<pre>FileReaderhere
</pre>
</div>
<div class="panel" id="BufferedReaderhere">
<pre>BufferedReaderhere
</pre>
</div>
<div class="panel" id="FileWriterhere">
<pre>FileWriterhere
</pre>
</div>
<div class="panel" id="BufferedWriterhere">
<pre>BufferedWriterhere
</pre>
</div>
<div class="panel" id="ObjectInputStreamhere">
<pre>ObjectInputStreamhere
</pre>
</div>
<div class="panel" id="ObjectOutputStreamhere">
<pre>ObjectOutputStreamhere
</pre>
</div>