Slide up and Slide down toogle box containing images







Live preview:

Click to show or hide images
My image container 1 👇
My image container 2 👇



This is the technique that used in most of the websites to arrange their pictures in order with the proper management of jQueries. This implementation shows a division containing pictures which is only shown while we click on the the parent division. The division uses toogle function which can perform both the hide function and show function. As in the live preview, we can see two containers image container one and image container two which has child divisions containing the images only show when we toogle on the major or parent division.

Here we used property slow inside the toogle function to slow down the toogle effect. The code here used contains jQuery, CSS and HTML. There is no need for the JavaScript function for any property of function. Here we can see the working of the toogle function used in the jQuery in the video given below:

Video Preview:



I think that you can understand the code given below. I only used a simple code to create an image with toggle function. Hope you understand well.

Code:


<html>
<head>
<title>ordered hided images using toogle / C S Psyco<title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<script>
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
$(document).ready(function(){
  $("#flip1").click(function(){
    $("#panel1").slideToggle("slow");
  });
});

</script>

<style>

#panel, #flip, #flip1, #panel1 {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel {
  padding: 50px;
  display: none;
}
#panel1 {
  padding: 50px;
  display: none;
}
.preview
{
border:2px solid black;
padding:10px;
}
</style>
</head>
<body>
<div class="preview">
Click to show or hide images
<br />
<div id="flip">
My image container 1 👇</div>
<div id="panel">
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="900" data-original-width="1600" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYBx6LmUSCOB6zyDscAvRHiGuECGAb-13SCm4uVoCfJ9XHlnFQ0lwh9g7il5A-TNGNVLIZZFLSTV5nV-SCxXr7HJOVNXWWks-dZSoZtTI_6soHFtqLhIPC6Ph5P-fBbbwTVW5nW3LpN4jj/s320/IMG_20190518_161938.jpg" width="320" /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="900" data-original-width="1600" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJUb_It3ih6GfzZEoSiWTOgePD_Q6-8CrNdw88G8rUuIT2zdHIv39_777HhpB0VQwKfGV6AnvrcgDQJr-zGgHITksJXwslzkm0WYUVDXq8WQmsxIotJF7If06QVBBItbE8Gx5_6R0jxfIQ/s320/IMG_20190526_191126.jpg" width="320" />
</div>
</div>
<div id="flip1">
My image container 2 👇</div>
<div id="panel1">
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="1200" data-original-width="1600" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibr6DHBlwti2IVDEEPFZ8SC3y8eEdTFy_PJqxBpjhz5c7BT1fJZkxtGlvP208zRDVh36pwBEHYq5Ixz6Oqb0856IkxXyJlKHxi4MxsdCyu5zcbTz_fZ5ptkZzjroWOuiZdAgbvdGvUDEm5/s320/IMG_20190517_161717.jpg" width="320" /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="1076" data-original-width="1600" height="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKO212vmV-6Kq5HZ01KZVXuIH6F4P1ya-G1Dg5zVVYpNCP8YOWYlHN_7lWiSr41qGp5j2QJM3Fa_Aoda_tYPM-E_PtfyVRgoEv2Nx-yjiu7ZpPt6h8HFHgeGHCQtTPtIOW3J7wA5AANLfv/s320/IMG_20190517_210120.jpg" width="320" /></div>
</div>
</div>
</body>
</html>


Thank You...Stay Updated

Comments

Post a Comment

Popular posts from this blog

Node.js Cheat Sheet

Image
To start a new node project, type  C:\Users\jinoy\OneDrive\Desktop\MERN>npm init -y      The basic syntax of calling a function in node.js with express is : const   functionname  = ()  =>  { console . log ( "hello world" ); } functionname (); To call a function after every 5 seconds : setInterval (()  =>  {      console . log ( "hello" ); }, 5000  ); To call a function only once after 4 second : setTimeout (() => { console . log ( "test" ); }, 4000 ); To run a script.js file on terminal, type : C:\Users\jinoy\OneDrive\Desktop\MERN>node script.js  OR C:\Users\jinoy\OneDrive\Desktop\MERN>node script To stop a function that is executing on every interval( time to call function again) : const   interval  =  setInterval (()  =>  {      console . log ( "hello" ); }, 1000  ); setTimeout (() => {      clearInterval ( interval );      console . log ( "stopped" ); }, 6000 ); The above function will work continously untill
Read more

Codeigniter ! Simple But Powerful

Image
CodeIgniter is a powerful PHP framework with a very small footprint, built for developers who need a simple and elegant toolkit to create full-featured web applications. It is the second largest php framework for website development (first-Laravel). Due to its simplicity, it is the most used framework ever than laravel. Actually these frameworks are only used for developing large scale website. The important thing about this framework is that it is using MVC principle . A MVC or Model View Control framework has a controller that controls all the pages in the website. There can be any number of controller created in codeigniter. The orginal webpages or the contents are placed in the folder named view .  Note : Don't touch the forder named system because it is the soul of the codeigniter Next ⇒
Read more

Introducing Cloudflare Pages ⚡

Image
https://github.com/Jinoy-Varghese/Jain-Lab After a long time cloudflare introduce new feature ' cloudflare pages ' allowing jamstack developers to host their website as free in cloudflare page. This new feature allow developers to use unlimited bandwidth and unlimited websites as a free user. You can host your repo directly to cloudflare servers using github.Websites are built through collaboration between designers, engineers, writers, and more. Cloudflare Pages makes it effortless to satisfy each group, so you can iterate quickly, and save time on coordination. You don't need to worry about the ssl certificate, since cloudflare provides ssl free certificate too.  Note: This pages are only for front end developers, it didn't have a database and did not support php.
Read more