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 (() => {      clearInterva...
Read more

Enhancing Supply Chain Security and Cloud-Native Development with Chainguard

Image
In the ever-evolving landscape of software development, ensuring supply chain security and embracing cloud-native practices are paramount. One solution that stands out in addressing these concerns is Chainguard, a platform providing secure images for development environments. Recently, I had the opportunity to explore Chainguard's capabilities firsthand through a sponsored video collaboration. The video delved into the seamless integration of Chainguard images into various development workflows, highlighting the significant advantages they offer in terms of security and efficiency. From hosting images on platforms like ECS, Apprunner, and Google Cloud Run to leveraging DockerHub for streamlined deployment, Chainguard simplifies the process while enhancing security measures. What sets Chainguard apart is its proactive approach to security. Images are rebuilt daily and frequently patched, minimizing vulnerabilities and mitigating risks associated with outdated dependencies. This ...
Read more

Bootstrap ? What is it ?

Image
Have you ever thinked about designing a file that can contain different styles which can be ewhile writing every code. Here is the answer. A Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites. Bootstrap is a free and open source front enddevelopment framework for the creation of websites and web apps. The Bootstrap framework is built on HTML, CSS, and JavaScript (JS) to facilitate the development of responsive, mobile-first sites and apps. The bootstrap file contain many CSS style , JavaScript and HTML which can be called any number of times during the execution of the program. The bootstrap file is a W3C accepted standard file wich can be used to develop a stylish website easly. Here you can download the bootstrap file directly from my website. It is the now available latest version of the bootstrap file. Version : 4.3.1 Click on the link below to download the bootstrap file. Bootstrap version 4.3.1 If you need ...
Read more