NagineniSoftwareDeveloper: Simple Slide Panel Using Jquery and CSS

will explain how to create a slide panel jquery effect with an example. Jquery provides various sliding methods such as

slideDown()
slideUp()
slideToggle()

I used slideToggle method to create jquery slide panel effect.

slideToggle Method:

First we will understand what is this slideToggle Method.

As per the name of this method it changes between the slideDown and slideUp methods
If the element have been slideDown it changes it will Slide them Up and vice versa.

See the slideToggle example

1

2

3

4

5

6

7

8

9

10

11

12

13

<!doctype html>

<html> 

<head> 

<style></style>

 <script></script>

 </head> <body> 

<div id="panel"> 

<img style="float:left; "src="welcome-to-my-blog.jpg" align="center" height="100%"/>

< br/><br/>

<p><i><h1>Put your own content here</h1></i></p>

 </div> <p><a href="#">Slide Panel</a></p> 

</body>

 </html>

I created one div with id ‘slide panel jquery‘.

You can add your own content in this slide panel jquery div.

And for sliding button I created one paragraph with class ‘jquery slide‘.

And I added some CSS stuff as shown below.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

body {

    margin: 0 auto;

    padding: 0;

    width: 570px;

    font: 75%/120% Arial, Helvetica, sans-serif;

}

a:focus {

    outline: none;

}

#panel {

    background: #FAFAD2;

    height: 200px;

    display: none;

}

.slide {

    margin: 0;

    padding: 0;

    border-top: solid 4px #422410;

    background: url(button.gif) no-repeat center top;

}

.btn-slide {

    background: url(white-arrow.gif) no-repeat right -50px;

    text-align: center;

    width: 144px;

    height: 31px;

    padding: 10px 10px 0 0;

    margin: 0 auto;

    display: block;

    font: bold 120%/100% Arial, Helvetica, sans-serif;

    color: #000000;

    text-decoration: none;

}

.active {

    background-position: right 12px;

}

And finally to create slide panel jquery simply add below jquery code

1

2

3

4

5

6

$(document).ready(function(){

    $(".btn-slide").click(function(){

        $("#panel").slideToggle("slow");

        $(this).toggleClass("active"); return false;

    });

});

The syntax of slideToggle is

1

$(selector).slideToggle(speed,callback);

It will take two parameters Speed and Callback both are optional

Speed parameter can be: “slow”, “fast”, milliseconds.
Callback parameter is a function that will execute after the sliding completes.

I hope you understand the slide panel jquery example tutorial

Here is the Jquery Slide Panel Demo .

NagineniSoftwareDeveloper

Monday, February 3, 2014

Simple Slide Panel Using Jquery and CSS

slideToggle Method:

No comments:

Post a Comment

Blog Archive

About Me