Choose from our various pricing plans. There is a package for everyone!


Tutorial: [jQuery] Show Panel

View previous topic View next topic Go down

Tutorial Tutorial: [jQuery] Show Panel

Post by Mr.Joker on Fri Sep 14, 2012 5:58 pm

Hello everyone. In this tutorial I will show you how to create one div which will show another one. It's quite simple if we use jQuery. So let's start from HTML & CSS code:

Code:
<html>
<head>
<style type="text/css">
#a {
margin:0px;
background-color:lightgreen;
text-align:center;
width:500px;
height:200px;
display:none;
border-left:1px solid black;
border-right:1px solid black;
border-top:1px solid black;
padding:5px;
}
p.flip {
margin:0px;
border:1px solid black;
background-color:lightgreen;
width:500px;
height:30px;
padding:5px;
text-align:center;
}
</style>
</head>
<body>
<div id="a">
<p>Some text</p><p>And test</p>
</div>
<p class="flip">Show panel</p>
</body>
</html>
So, we have div with ID "a" and he is not visiable for users. We also have an paragraph class called .flip which is visiable and it has same properties as first div. The difference is height because we don't need so high paragraph. Now, how to display that hidden div? Well, using jQuery of course. Here is the code:

Code:
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$(".flip").click(function() {
$("#a").slideToggle(1000);
});
});
</script>
First script is used everywhere because without it any jQuery code can't work. That first script contain whole jQuery functions, methods , and many other things which is complete Javascript library. The second script which we used is the one we need to understand. Let's go part by part.
Code:
$(document).ready(function() {
This part represent the whole document. That specific code tell to web browser to execute the code as soon as document load.
Code:
$(".flip").click(function() {
This code set first moment of thing we want to do. We set here the first part of clicking on paragraph with class flip. So when someone click on paragraph with class flip something will happend, but we didn't said what. To set what will happend we add last part of code:
Code:
$("#a").slideToggle(1000);
This specific code tell web browser to show hidden div with ID "a". This number 1000 is miliseconds how fast will that div appear. If we wish for 2 seconds we write 2000 and so on. Toggle is there to enable hidding the div again if you click on paragraph once more.

Author: Mr.Joker
Skills required: HTML & CSS & jQuery
Difficulty: Easy
Demo: Here


Last edited by Mr.Joker on Fri Sep 14, 2012 10:50 pm; edited 1 time in total


Please read forum rules. Don't request help via PM!

avatar
Mr.Joker
Premium Member


Age : 24
Posts : 283
Join date : 2012-06-24
Reputation : 21

View user profile

Back to top Go down

Tutorial Re: Tutorial: [jQuery] Show Panel

Post by RSguideMaker on Fri Sep 14, 2012 10:29 pm

Awesome tutorial Mr.Joker.



Please do not request help via PM! Post on the forums where it can help everyone.
avatar
RSguideMaker
Support Moderator
Support Moderator

Age : 18
Posts : 421
Join date : 2012-05-23
Reputation : 9

View user profile http://euanfitzpatrick.co.nf/

Back to top Go down

Tutorial Re: Tutorial: [jQuery] Show Panel

Post by Eclipse on Fri Sep 14, 2012 11:50 pm

Very nice tutorial, great work joker!




avatar
Eclipse
Premium Member


Age : 19
Posts : 212
Join date : 2012-07-23
Forum Version : PunBB
Reputation : 3

View user profile http://discussionhq.com/

Back to top Go down

Tutorial Re: Tutorial: [jQuery] Show Panel

Post by Th1nK on Sat Sep 15, 2012 10:09 am

Nice!
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: Tutorial: [jQuery] Show Panel

Post by RSguideMaker on Fri Sep 21, 2012 12:46 am

Congratulations, your tutorial has been accepted.



Please do not request help via PM! Post on the forums where it can help everyone.
avatar
RSguideMaker
Support Moderator
Support Moderator

Age : 18
Posts : 421
Join date : 2012-05-23
Reputation : 9

View user profile http://euanfitzpatrick.co.nf/

Back to top Go down

Tutorial Re: Tutorial: [jQuery] Show Panel

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum