Thursday, November 19, 2009

Jquery: Show and hide a partially-extended list


Demo

"Show and Hide" effects are the most commonly used effects used in the Javascript library. They are easy to learn and implement but yet visually impressive enough to catch some attention.

To show or hide contents completely is easy. But what about showing a partially-extended list?

I found a excellent tutorial from Chris Pollack which details how to do it: Sliding content from a partial height with jQuery.

So what i'm gonna do today is to simplify his code and to explain in details how it work.

Let's create a simple list. Preferably make the list long so that you can see the sliding effect better.

HTML
<div id="slide">
<ul>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
</ul>
</div>

This should be what you will get:
Photobucket

CSS
<style type="text/css">
#slide{
overflow:hidden;
width:300px;
margin:0 auto;
text-align:center;
}

#slide ul{
list-style:none;
border:3px #444 solid;
border-bottom:none;
margin:0px;
padding:0px;
}

#slide ul li a {
color:#3274d0;
display:block;
border-bottom:2px #444 solid;
text-decoration:none;
}

#slide ul li a:hover{
color:#fff;
background:#3274d0;
}

.bottom{
width:300px;
margin:0 auto;
border-top:3px #444 solid;
text-align:center;
}

.tabs {
width:100px;
margin:0 auto;
}

.tabs a{
background:#3274d0;
color:#fff;
padding:3px;
text-decoration:none;
border:3px #444 solid;
border-top:none;
display:block;
}
</style>

You will get this:
Photobucket


Honestly 99% of my CSS is just to beautify the list.

The most important line in the style-sheet would be the "overflow" property. "hidden" would allow it the list to be cut to it's required length.

Ok! enough with mundane stuff. Let's get sliding!

Javascript
<script type="text/javascript">

var sliderHeight = "100px";
var cHeight;

$(document).ready(function(){
cHeight = $('#slide').height();
$("#slide").css("height",sliderHeight);
$(".tabs").html('<a href="#">Pull</a>');
$('.tabs a').click(function(){
openSlider()
})
});<!-- end document ready -->

function openSlider(){
$('#slide').animate({height:cHeight+"px"},"slow");
$(".tabs").html('<a href="#">Up we go!</a>');
$('.tabs a').click(function(){
closeSlider()
})
}<!-- end open slider -->

function closeSlider(){
$('#slide').animate({height:sliderHeight},"slow");
$(".tabs").html('<a href="#">Pull!</a>');
$('.tabs a').click(function(){
openSlider();
});
}<!-- end closeSlider -->
</script>

Javascript explained - Variable sliderHeight is to state your list's height when it is partially hidden. cHeight is to record the list's true height.

Basically, JS will record your list height first.
var sliderHeight = "100px";
var cHeight;


Then when "a" inside of class ".tabs" is been clicked, function openSlider() will be called.
$('.tabs a').click(function(){
openSlider()
})


Inside openSlider() function, animation method is used to reveal the true height,cHeight.
$('#slide').animate({height:cHeight+"px"},"slow")

If ".tabs a" is been clicked again, closeSlider() function will be called instead. The list will then slide back to it's hidden height.
$('.tabs a').click(function(){
closeSlider()
})

Labels: , , ,

60 Comments:

Anonymous android tablet said...

Good post. Amazing tutorial. Thanks for sharing.

July 13, 2011 at 8:45 AM  
Anonymous Web designing in india said...

Thanks for sharing this script with us.Its really very useful.

July 30, 2011 at 3:18 PM  
Anonymous online viagra said...

Hi Friend,
You did really a great job. I found your blog very interesting and very informative. I think your blog is great information source & I like your way of writing and explaining the topics. Keep it up. I'm going to follow your blog.

October 13, 2011 at 7:08 PM  
Blogger Sonam Gupta said...

The fact that investing in stock market is no longer considered a stride reserved for the high end individuals and elite groups and that even lay men can venture into this risk entailed arena will surely sweep you off your feet.

Stock Tips, Commodity Tips

May 28, 2012 at 5:37 PM  
Blogger Sonam Gupta said...

The competition is rough for gaining the highest rankings on search engine lists. Because of this fierce competition, you will need to work hard at choosing words most descriptive of your images.

Commodity Tips, Commodity Tips

June 13, 2012 at 8:01 PM  
Blogger Sonam Gupta said...

If you were given the chance to reap substantial financial gain from penny stocks trading, would you take it? These days given the current global economic crisis we are facing beginner and advanced investors all over the world are looking for new ways to strategically diversify their current investment portfolio.

Equity Tips, free commodity tips

June 18, 2012 at 6:32 PM  
Blogger epicresearch4 said...

mcx tips
Many thanks for the exciting blog posting! I really enjoyed reading it, you are a brilliant writer

March 8, 2013 at 7:05 PM  
Blogger Clipping Path Job said...

A nice sharing that will help others.

December 8, 2013 at 3:58 PM  
Blogger Nidhi Singh said...

We, at Epic research , strongly believe that investment advice should be totally independent and no biases should affect the ratings.

November 18, 2014 at 8:05 PM  
Blogger sabir said...

here is the link for all of our online user to get marvel contest of champions hack online from this webpage.

June 23, 2015 at 1:45 AM  
Blogger Bắp Cải said...

This is a great web site. Good sparkling user interface and very informative blogs. I will be coming back in a bit, thanks for the great article. I have found it enormously useful..
happy wheels| happywheels| happy wheels hacked| happy wheels demo| happy wheels| happywheels| happy wheels hacked| happy wheels demo
tetris| tetris games| tetris unblocked| unblocked tetris| monster high games| monsterhighgames| monster high| monsterhigh

July 14, 2015 at 12:11 PM  
Blogger Trần Lucy said...

Your article is very good, I have searched a lot of information in this article. I began to do a page, i hope it is soon completed. People can visit and comment, thanks.
ggg games for girls , coolmath4kids games , friv 4 , friv 2 , unblocked games happy wheels , juegos de autos de carrera , pou online , kizi 2 , juegos los simpson , kids games online , unblocked games happy wheels

September 1, 2015 at 4:44 PM  
Blogger Love KidsTV said...

Thanks for your post. Click to play Plants vs Zombies , Solitaire,Tom And Jerry Games, Brain Games, Happy Wheels , Five Nights At Freddy's

September 22, 2015 at 11:01 PM  
Blogger Trần Linh said...

This is a great article. Your information is very rich, it helps me have more knowledge about life.
happy wheels ,
descargar whatsapp ,
baixar whatsapp ,
mobogenie ,
descargar facebook ,
descargar whatsapp ,
descargar whatsapp gratis ,
baixar whatsapp gratis ,
descargar whatsapp ,
android market ,
agario

September 25, 2015 at 3:14 PM  
Blogger Aditi Vyas said...

Ways2Capital-Euity Tips

November 2, 2015 at 4:54 PM  
Blogger Aditi Vyas said...

PNPINFOTECH - Web Design And Development in indore

November 2, 2015 at 4:55 PM  
Blogger Alice Taylor said...

I have not understand
Learn To Fly | Learn To Fly 2 | Learn To Fly 3 | Pacman | Pacman game | Pacman games | Mahjong | Mahjong game | Mahjong online| Happy Wheels | happywheels| happy wheel| Monkey Go Happy | Monkey Go Happy 2| Monkey Go Happy 3

November 6, 2015 at 3:26 PM  
Blogger Hola Launcher said...

I am very happy to read this. Appreciate your sharing. If have a long time than visit to:
hola launcher
paradise bay
hola
subway surfers
cooking fever game
paradise bay game
cooking fever
subway surfers game
hola launcher apk
paradise bay game

November 11, 2015 at 6:23 PM  
Blogger Messenger Indir said...

Thanks for all your information, Website is very nice and informative content.
messenger indir | messenger | messenger dowload | messenger indir | messenger | messenger indir | messenger download

November 24, 2015 at 4:08 PM  
Blogger Swords And Souls said...

Posts shared useful information and meaningful life, I'm glad to be reading this article and hope to soon learn the next article. thank you
sword sand souls | ninjago games | hola launcher | agario | cooking fever | goodgame big farm | red ball 4 | agar io | subway surfers | paradise bay

January 12, 2016 at 6:17 PM  
Blogger aneta qurdadze said...

I enjoyed over read your blog post. Your blog have nice information, I got good ideas from this amazing blog. I am always searching like this type blog post. Love this idea! Could you tell me how to find the printables. Thank you!
I hope I will see again..
gun blood Happy Wheels | Happy Wheels game piano tiles 2 Happy Wheels 2 Happy Wheels 3 Happy Wheels demo Happy Wheels online gunblood cheats gunblood western gunblood play gunblood gunblood Unblocked gunblood cheat

February 9, 2016 at 3:29 AM  
Blogger Ann Kelly said...

Thank you! I have to thank you for the efforts you’ve put in penning this site.I really hope to check out the same high-grade blog posts by you later on as well. In truth, your creative writing abilities has motivated me to get my own website now !
I like play games. Click to play:
open facebook
facebook login
happy wheels
happy wheels game
earn to die
earn to die game

March 31, 2016 at 4:18 PM  
Blogger Strike Force Heroes 3 said...

Great! Thanks for sharing the information. That is very helpful for increasing my knowledge in this field. Happy Wheels 3, Happy Wheels, Happy Wheels 4, whatsapp baixar, WhatsApp Indir, facebook indir, baixar mobogenie, Jogos de Friv, whatsapp gratis, descargar facebook, descargar whatsapp, descargar whatsapp, descargar mobogenie, juegoskizi, juegoskizi

April 14, 2016 at 9:43 AM  
Blogger Mai Doan said...

Tiny Tanks is a popular game that all of you would like. In which you can play Tiny Planes, Run 3 Unblocked Run 4 Unblocked Hacked unblocked Games. Or you can go to play Tiny Planes Tiny Planes Beta
Run 3 Unblocked
Run 4 Unblocked
Run Unblocked
Car Racing Games
Super Mario Unblocked.
Donkey Kong Unblocked.

April 26, 2016 at 3:38 PM  
Blogger Anna Candy said...

Earn to Die is the latest installment of the Earn to Die series. Here the game quickly picks off from where it left off and sees the main character escaping the zombies and reaching the military base.

Earn to Die 2 | Earn to Die 3

Tank Trouble Game is one of the most exciting online flash games, it revolves around shooting of opponent tanks and finishing them for points.

Tank trouble 2 | Tank trouble 3 | Tank trouble 4

May 7, 2016 at 4:51 PM  
Blogger Alice Taylor said...

Thanks for all your information, Website is very nice and informative content
monkey go happy 2cat mario 2learn to fly 2 | happy wheels demo | mahjong online | pacman game | monkey go happy 3 | cat mario 3learn to fly 3 | happy wheels 2 | mahjong | pacman games

May 12, 2016 at 3:15 PM  
Blogger Kelly Anni said...

Earn to Die is the latest installment of the Earn to Die series. Here the game quickly picks off from where it left off and sees the main character escaping the zombies and reaching the military base.

Earn to Die 2 | Earn to Die 3

Tank Trouble Game is one of the most exciting online flash games, it revolves around shooting of opponent tanks and finishing them for points.

Tank trouble 2 | Tank trouble 3 | Tank trouble 4

May 16, 2016 at 4:18 PM  
Blogger hường lê said...

We are really grateful for your blog post. You will find a lot of approaches after visiting your post.

Great work.

Such a very useful article. Very interesting to read this article.I would like to thank you for the

efforts you had made for writing this awesome article.
Sign in to Gmail to access to all Gooogle services. Log in to your account or sign up to create a new

account
gmail sign in

gmail log in

what's gmail?

slitherio

Tank trouble

happy wheels

Strike Force Heroes

In this game, you start at the cavern men's age, then evolve! There is a total of 5 ages, each with its

units and turrets. Take control of 16 different units and 15 different turrets to defend your base and

destroy your enemy.
age of war

We are really grateful for your blog post. You will find a lot of approaches after visiting your post.

Great work.
happy wheels

strike force heroes

earn to die

Fireboy and Watergirl arrived again to the temple in the forest. 2 players together can help them to find

their way out.
fire boy and water girl

May 30, 2016 at 11:14 AM  
Blogger Friv4 Games Online said...

The article you have shared here very awesome. I really like and appreciated your work. I read deeply your article, the points you have mentioned in this article are useful
Signature:
happy wheels
friv
girlsgogames
games2girls
happy wheels
fireboy and watergirl

June 3, 2016 at 11:28 AM  
Blogger Alice Denny said...

Welcomes to google terminal from Austin Texas! google snake
Amazing insight you have on this, Happy wheels it's nice to find a website that details so much information about different artists... Age of war 2 This article always blew me... Earn to die For how many times I have read this.
slither io Hi! I’ve been reading your blog for a while slitherio it's nice to find a website that details so much big farm

June 20, 2016 at 11:47 AM  
Blogger NextG Design said...

It is extremely helpful for me. Thank you for taking the time to discuss this. I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with more information.

June 26, 2016 at 12:01 PM  
Blogger Kelly Anni said...

I read this blog, thanks for sharing another great article.
slither io | wings io | science kombat | tank trouble 4

July 8, 2016 at 8:59 PM  
Blogger Jordan Ovilia said...

This is the game so players feel very fierce , adventurous . You try to join and play this game , you will feel great like.
age of war | tank trouble 2 |earn to die
gun mayhem | gun mayhem 2
slitherio | slither.io | slither io
can your pet | Red Ball | | duck life
Gmail.com by Google is one of the most popular email services nowadays which lets you send emails to your friends, relatives, business partners wherever they are (the only thing they need is the Internet)
gmail sign in | create a gmail account
Gmail login

July 9, 2016 at 12:08 PM  
Blogger Strike Force Heroes 3 said...

I found lots of interesting information here.Great work. The post was professionally written and I feel like the author has extensive knowledge in this subject. Nice post. Happy Wheels, happy wheels, Happy Wheels 4, Happy Wheels, Swords And Souls, swords and souls 2, Potty Racers 3

July 27, 2016 at 9:28 AM  
Blogger Unknown said...

food near me
food near me
food near me
food near me
food near me
food near me
food near me
food near me
food near me
food near me
food near me
food near me
food near me
food near me
food near me

August 11, 2016 at 2:22 AM  
Blogger Cute Soc said...

OMG. here is full of very great game. let go of your game.
gun mayhem | age of war
learn to fly | happy wheels game
tank trouble

September 26, 2016 at 10:08 AM  
Blogger Dash Geometry said...

You’ve written nice post, I am gonna bookmark this page, thanks for info. I actually appreciate your own position and I will be sure to come back here.
Geometry Dash

October 6, 2016 at 11:54 AM  
Blogger Johnson Tonya E. said...

You go to our Web page you can play online games for free.
Our Web page selection is the biggest collection so you can play entirely for free
gun mayhem 3 | can your pet 2
learn to fly 3 | happywheels
tank trouble 3

October 11, 2016 at 11:13 AM  
Blogger Tdt 3535 said...

Thanks for sharing the information. It is very useful for my future. keep sharing. Can you play more games at:
Happy Wheels | Five Nights at Freddy’s | Friv 1000 | Kizi 4

November 1, 2016 at 11:30 AM  
Blogger Alice Denny said...

The blog or and best that is extremely useful to keep I can share the ideas. Age Of War 2
Big Farm | Slitherio | Tank Trouble
Of the future as this is really what I was looking for, I am very comfortable and pleased to come here. Thank you very much.
Happy Wheels | Goodgeme Empire | Slither.io


November 22, 2016 at 6:37 AM  
Blogger Oanh Tran said...

Thank you so much for commenting, it is lovely and really makes my day!
wheely 8 games
zoxy 3
twizlgames
papalouie 4

November 23, 2016 at 10:20 AM  
Blogger Oanh Tran said...

Thank you so much for commenting, it is lovely and really makes my day!
zoxy games
friv 10 games
friv games
friv 100 play

November 23, 2016 at 10:21 AM  
Blogger Alice Denny said...

The blog or and best that is extremely useful to keep I can share the ideas. Age Of War 2
Big Farm | Slitherio | Tank Trouble
Of the future as this is really what I was looking for, I am very comfortable and pleased to come here. Thank you very much.
Happy Wheels | Goodgeme Empire | Slither.io


November 25, 2016 at 12:09 PM  
Blogger Oanh Tran said...

Thank you so much for commenting, it is lovely and really makes my day!
wheely 8 games | zoxy 3 | twizlgames | papalouie 4

November 25, 2016 at 3:39 PM  
Blogger Oanh Tran said...

Thank you so much for commenting, it is lovely and really makes my day!
zoxy games |
friv 10 games | friv games | friv 100 play

November 25, 2016 at 3:40 PM  
Blogger Alice Denny said...

The blog or and best that is extremely useful to keep I can share the ideas. Age Of War 2
Big Farm | Slitherio | Tank Trouble
Of the future as this is really what I was looking for, I am very comfortable and pleased to come here. Thank you very much.
Happy Wheels | Goodgeme Empire | Slither.io


November 28, 2016 at 10:09 AM  
Blogger Megan Nicole said...

I am sure that the informative you shared througheful for my future. keep sharing. A good blog.
wings.io | super mechs 2 | wingsio | run 2 game | supermechs | run 2

December 9, 2016 at 5:29 PM  
Blogger Linh Hoa said...

I think what you say on here is the best thing. Looking forward for our lives become increasingly more beautiful
return man 2 game , return man 2 ,return man

December 24, 2016 at 10:22 AM  
Blogger Linh Hoa said...

Just remember your stab at this business, should you decide to end it, is not a failure but a training ground. You will take with you what has worked and learned from what has not in order to make the next business idea a success!
subway surfers game , subway surfer , subway surfers

December 24, 2016 at 10:22 AM  
Blogger Trần Mi said...

The article gives me a lot of interesting information. I still often share life experiences with friends. And I enjoyed the convenience and attractiveness of free messaging app
whatsapp baixar , baixar whatsapp , baixar whatsapp gratis

December 26, 2016 at 4:40 PM  
Blogger Trần Mi said...

Facebook has become a part of my life, not only helped me to connect with you but also where I can share every moment in life. I really like the convenience that it brings
facebook baixar , baixar facebook , baixar facebook gratis

December 26, 2016 at 4:41 PM  
Blogger Bảo Gia said...

I liked it so much and very interesting, too! Thanks for sharing the experience.
Wonderful post, really great tips and advice.
friv 3
friv 4
kizi 2

December 27, 2016 at 11:06 AM  
Blogger Bảo Gia said...

I liked it so much and very interesting, too! Thanks for sharing the experience.
Wonderful post, really great tips and advice.
friv 3
friv 4
kizi 2

December 27, 2016 at 11:09 AM  
Blogger Như Quỳnh said...

Your article very well and good, bringing inspiration to many. I hope people visit my website.
Minecraft 4

January 9, 2017 at 1:33 AM  
Blogger Mai nguyễn said...

Thank you for such a sweet tutorial - all this time later, I've found it and love the end result. I appreciate the time you spent sharing your skills.
Facebook Lite

January 13, 2017 at 5:25 PM  
Blogger Friv Friv Games said...

I enjoyed over read your blog post. Your blog have nice information, I got good ideas from this amazing blog. I am always searching like this type blog post. I hope I will see again.
friv 3
friv4school 2017
kizi 2
zoxy games
frivfriv

February 11, 2017 at 8:06 PM  
Blogger jake cole said...

Great!All necessary information provided.Must go through it
generic viagra online

February 16, 2017 at 5:55 PM  
Blogger ONLINEPILLSRX ONLINE PHARMACY said...

What a Post .Thanks for sharing.All information together.
Buy Generic Viagra online

February 23, 2017 at 2:55 PM  
Blogger Elliot Thomson said...

This comment has been removed by the author.

March 16, 2017 at 1:19 PM  
Blogger Elliot Thomson said...

Wonderful post.
buy viagra caverta online

March 16, 2017 at 1:21 PM  

Post a Comment

Subscribe to Post Comments [Atom]

Links to this post:

Create a Link

<< Home