Papermashup

Subscribe


Tweets


"RT @Eva_Shaughnessy: #finedining @romomobilecafes restaurant this evening with #NewHair #winning #SaturdayNight #GirlsNightOut http://t.co/…"

@ashleyford 3 weeks ago

"RT @kycutwilson: @ashleyford @burgerbeartom incredible. There's 5 more left! Shout about it!!"

@ashleyford 4 weeks ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Papermashup

Simple jQuery Show/Hide Div

Show and hide a div using jQuery

AshleyAshley

Here’s a simple tutorial on how to show/ hide a div using jQuery. First we include the Google jQuery library, the next steps simple. We now setup a click event listener which is triggered when a users click the and object that has the class ‘show_hide’ which then toggles the div element with the class ‘slidingDiv’. In the HTML below we’ve setup a simple link with the class ‘show_hide’ and the content div in which we’ll show and hide which has the class ‘slidingDiv’. You’ll also notice in the first two lines of JavaScript we’re hiding the div content and showing the href this is so if the user doesn’t have JavaScript enabled they see the content box open but no option to hide it.

Hold up! Are you looking to show and hide multiple divs? Check out the latest tutorial on how to do this using a plugin i’ve written for this very job. Get the plugin here

The JavaScript


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

$(".slidingDiv").hide();
$(".show_hide").show();

$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});

});

</script>

The HTML


<a href="#" class="show_hide">Show/hide</a>
<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="show_hide">hide</a></div>

The CSS



.slidingDiv {
height:300px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
border-bottom:5px solid #3399FF;
}

.show_hide {
display:none;
}

Although this code technique is simple its often required in projects.

Hold up! Are you looking to show and hide multiple divs? Check out the latest tutorial on how to do this using a plugin i’ve written for this very job. Get the plugin here

demo download

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 203
  • nika
    Posted on

    nika nika

    Reply Author

    oh this is what i need .thank you so much!!!


  • SproutCreatives
    Posted on

    SproutCreatives SproutCreatives

    Reply Author

    Got any ideas on how to use the same script show and hide and Div but also change the text of the link thats clicked? Like say from “MENU” to “CLOSE”.


  • James
    Posted on

    James James

    Reply Author

    Just wanted to shout out a Big Thank You for this! Very simple to use.


  • shahin
    Posted on

    shahin shahin

    Reply Author

    exactly what i need. thank you very much


  • Kim
    Posted on

    Kim Kim

    Reply Author

    I am using this on our website http://www.pristorvet.dk (the green button) but when I load the page it show’s the page quickly and then it vanish until the button is clicked.

    How can avoid this issue (it’s worse if you have slow internet, like on a mobile internet)


  • koldtoft
    Posted on

    koldtoft koldtoft

    Reply Author

    Nevermind. I solved that problem myself. It was just my DIV tags that was poorly made.

    Now I need a way to hide another div and show one when clicking


  • koldtoft
    Posted on

    koldtoft koldtoft

    Reply Author

    Sorry ignore my first message….

    I am tryign to use this on our website http://www.pristorvet.dk but have a problem.

    The problem is that I can’t make the DIV that i place this div inside, expand along with it. So if I place it like this

    I am trying to insert code here..

    [ecko_code_highlight]
    <div style="min-height:100px;"> <!– This div does not expand it’s height when the other div expands inside it –>

    <div class="slidingDiv"> <!– THIS DIV is 300px high –>
    My content <a href="#" class="show_hide">hide</a>
    </div>

    </div>
    [/ecko_code_highlight]

    I hope someone can help me withn this. I have also tried to z-index the div above other content as a half-ass sollution to what I need, but that also did not work.


  • Poptropica
    Posted on

    Poptropica Poptropica

    Reply Author

    There something wrong as I implement the code. it appears but in couple of seconds 2-3 it goes back or hide again. What went wrong? Im not really good in coding, hope you can help. I’ll bookmark your site just in case i can’t see an email reply.


    • blam
      Posted on

      blam blam

      Reply Author

      Have the same problem
      juste change the href=”#” in href=”javascript:void(0)”


  • Akin
    Posted on

    Akin Akin

    Reply Author

    Thanks alot……….God bless you


  • Rich
    Posted on

    Rich Rich

    Reply Author

    Awesome!! thank you


  • mikey
    Posted on

    mikey mikey

    Reply Author

    woww


  • aisha
    Posted on

    aisha aisha

    Reply Author

    lovely article!!! thankyou


  • ben
    Posted on

    ben ben

    Reply Author

    hi great work!
    how can i make it slideToggle from right to left ?


  • MLM Software
    Posted on

    MLM Software MLM Software

    Reply Author

    Thanks to share this article. that is very help full me


  • Alex
    Posted on

    Alex Alex

    Reply Author

    Is it possible to have it popping up on different Div or does it work only with one Div?


    • Alex
      Posted on

      Alex Alex

      Reply Author

      doesn’t matter. sorted this issue


  • Alex
    Posted on

    Alex Alex

    Reply Author

    Is it possible to not make it a slider? And just have it pop up?


  • eko
    Posted on

    eko eko

    Reply Author

    thanks,helpfull


  • James
    Posted on

    James James

    Reply Author

    If your site is run over https, this won’t always work. The fix is super trivial. Just change that jquery reference to:

    You could just leave it as that in general… If you’re one of the cool kids, like me.


  • Pravin
    Posted on

    Pravin Pravin

    Reply Author

    Thanks.. It helped me


  • Dominic Farrington
    Posted on

    Dominic Farrington Dominic Farrington

    Reply Author

    This was simple and useful even for a JQuery illiterate bum like me!


  • Sarah
    Posted on

    Sarah Sarah

    Reply Author

    It helps me a lot for hiding answers from a quiz
    Thansk a lot for sharing


  • Arun
    Posted on

    Arun Arun

    Reply Author

    Really nice article. You can check this link which has an article on how to Show, Hide an HTML Div and Animate an Asp.Net “Panel” Control.

    http://www.encodedna.com/2013/02/jquery-show-hide-div-animate-panel.htm

    Your reviews will be appreciated.

    Thank you.

    Arun


  • Nick
    Posted on

    Nick Nick

    Reply Author

    man thanks a lot save me a lot of time.


  • Stefano
    Posted on

    Stefano Stefano

    Reply Author

    Nice and clean, thank you.


  • Twitter Followers
    Posted on

    Twitter Followers Twitter Followers

    Reply Author

    Awesome tip, and very easy to customize
    once you understand how the script works!

    Thanks for sharing!


  • Kyle
    Posted on

    Kyle Kyle

    Reply Author

    I copied the code to a site. For Only thing I did was change the div class name. The div starts hidden, when I click on the link the div shows. However, when I click again to hide the div, it doesn’t hide.. It goes away for a split second but shows right back up. Thoughts?


  • Eckstein
    Posted on

    Eckstein Eckstein

    Reply Author

    Is there a way to only show 1 div at a time. So that if a second one is opened, it closes the first, etc?


  • Minh Hien
    Posted on

    Minh Hien Minh Hien

    Reply Author

    Great! Thanks a lot!


  • ravinder
    Posted on

    ravinder ravinder

    Reply Author

    Hey can someone please help me to use this code in blogger i want use it in one of my blog please tell me how to use this code.


  • Maninder Singh
    Posted on

    Maninder Singh Maninder Singh

    Reply Author

    Thanks Very Much


  • P-teo
    Posted on

    P-teo P-teo

    Reply Author

    Can anyone explain why it has the

    $(“.slidingDiv”).hide();
    $(“.show_hide”).show();

    Using display:none; in the css does it fine from what i have seen.


  • Iosif
    Posted on

    Iosif Iosif

    Reply Author

    Many thanks for the code. It is the simplest and nicest one I could find. It works great.


  • Billy
    Posted on

    Billy Billy

    Reply Author

    Thanks for share, i used it for my website, demo http://mylyric.net


  • Rajan
    Posted on

    Rajan Rajan

    Reply Author

    Thanks a lot


  • gine8
    Posted on

    gine8 gine8

    Reply Author

    Many thanks!! Easy and very helpfull!

    😉


  • Rohidas Vitthal Sanap
    Posted on

    Rohidas Vitthal Sanap Rohidas Vitthal Sanap

    Reply Author

    Really very very nice article to show and hide the same div on click of same div…..
    Great work and thnx…


  • Puneeth
    Posted on

    Puneeth Puneeth

    Reply Author

    Hi,

    Thanks a lot…


  • dswww
    Posted on

    dswww dswww

    Reply Author

    Hi, Thanks for the article. I will try make somethime like this div.


  • Nigel
    Posted on

    Nigel Nigel

    Reply Author

    Thanks, very handy.


  • adam
    Posted on

    adam adam

    Reply Author

    Just wanted to share the website named: http://www.uxzeal.com/… dedicated to designing community…


  • tom
    Posted on

    tom tom

    Reply Author

    Is there a way of making the div visible as the default view when the page loads?


    • Yiannis
      Posted on

      Yiannis Yiannis

      Reply Author

      set slidingDiv to “show” in javascript

      $(“.slidingDiv”).show();


  • sam
    Posted on

    sam sam

    Reply Author

    Very useful one


  • mahmud
    Posted on

    mahmud mahmud

    Reply Author

    Thanks for analyzing everything. Is there any way to include a contact form in the hidden div?


  • Jyoti Ranjan Pattnaik
    Posted on

    Jyoti Ranjan Pattnaik Jyoti Ranjan Pattnaik

    Reply Author

    Hey, Thanks a lot for this nice snippet


  • Pramod
    Posted on

    Pramod Pramod

    Reply Author

    This is good hide show example, i have used this in my work, its working perfectly. but seems bit issue. Whenever you refresh the page the hidden div will popout and go. how can we get rid of the popup when we refresh the page.

    Thanks!!


    • Miraj
      Posted on

      Miraj Miraj

      Reply Author

      use style=”display:none” while declaring div which you want to toggle and then use the above javascript code.


  • Muhsin
    Posted on

    Muhsin Muhsin

    Reply Author

    thanks
    The code and java script is very good


  • Muhsin
    Posted on

    Muhsin Muhsin

    Reply Author

    The code and java script is very good


  • suhail
    Posted on

    suhail suhail

    Reply Author

    thanx for this article…………


  • Bhaksar
    Posted on

    Bhaksar Bhaksar

    Reply Author

    hi
    great post and easy to understand.I have done on this based on drop down list selection
    http://csharpektroncmssql.blogspot.com/2011/12/hideshow-div-using-jqueryjson.html


  • Sardar Ranjeet Singh
    Posted on

    Sardar Ranjeet Singh Sardar Ranjeet Singh

    Reply Author

    Thank you so much, it was very helpful.


  • Ulrika
    Posted on

    Ulrika Ulrika

    Reply Author

    Hi!

    Thanks for this good tutorial and code, very good!

    I wonder if this is possible:
    From another page I want to link to this page and in the link tell what div should show on the landing page.


  • Ava
    Posted on

    Ava Ava

    Reply Author

    Thank you so much! This has saved me a bunch of time. Great work.


  • Nima Heydarian
    Posted on

    Nima Heydarian Nima Heydarian

    Reply Author

    Hi, Thanks for the article. Great post.

    The ‘#’ link takes the user to the top of the page. Is there anyway to disable that?


    • Miked
      Posted on

      Miked Miked

      Reply Author

      Hi there Nima.

      If you replace the href=”#” with something like this: href=”javascript:void(0);” then the browser shouldn’t jump to the top of the page.

      Cheers
      Miked


    • Angelo
      Posted on

      Angelo Angelo

      Reply Author

      Thanks for asking what I was going to ask :)


  • Valeka
    Posted on

    Valeka Valeka

    Reply Author

    Thanks a lot! Great job here!


  • Francis L
    Posted on

    Francis L Francis L

    Reply Author

    A big help when I needed a quick reference as a refresher. Thanks!


  • Melissa
    Posted on

    Melissa Melissa

    Reply Author

    Bravo! Exactly what I was looking for. Easy to understand.


  • Al
    Posted on

    Al Al

    Reply Author

    Hi Ashley

    This works really well. However, I just wondered if there was a way I could have the ‘show/hide’ disappear when the div is expanded?


  • Dave
    Posted on

    Dave Dave

    Reply Author

    Hi!

    Thanks for the tutorial. Can you tell me how I start with the div hidden?

    Dave


  • chris
    Posted on

    chris chris

    Reply Author

    hi, can anyone tell me, how to do, if i have several links, if one of the links / divs is open, if i click on another link, the previous one to close, and to open the new div? how to do that?


  • Davinder Singh
    Posted on

    Davinder Singh Davinder Singh

    Reply Author

    not working in blogger :( please tell me how to use this in blogger


  • Osward
    Posted on

    Osward Osward

    Reply Author

    This tool can it be used even if script is not enabled? And how do i use it within one page several times?


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @Osward,

      nope this script requires JavaScript to be enabled, and to use it multiple times just assign a class to the div you want to show / hide.

      Ashley


  • Mark
    Posted on

    Mark Mark

    Reply Author

    Symantec detected a malicious cookie on your site.
    [SID: 25556] Web Attack: Malicious Cookie Activity 4 detected. Traffic from IP address 146.185.254.146 is blocked. Also your contact form does not work, at least with IE8. Just an Fyi.


  • mike
    Posted on

    mike mike

    Reply Author

    thnx for the code, working great


  • venkat
    Posted on

    venkat venkat

    Reply Author

    thanks for your code ,its simple and working.


  • San
    Posted on

    San San

    Reply Author

    Thanks for this tutorial! Is it possible to make it show from bottom to top instead of from top to bottom? I mean the sliding animation, since I’m making a footer with buttons. Thanks!!


  • rajiv
    Posted on

    rajiv rajiv

    Reply Author

    thankx for giving me jquery its working


  • migs
    Posted on

    migs migs

    Reply Author

    hi there,

    can this have a function to hide all the other divs when i click on to show one div?

    Thanks


  • andrea
    Posted on

    andrea andrea

    Reply Author

    hi, great script.

    i have a question. How can i set before the DIV “hide” then when click the DIV “show”? in short, on the contrary.

    hope your help.
    regards
    andrea


  • Anantha.KN
    Posted on

    Anantha.KN Anantha.KN

    Reply Author

    Thanks a Lot


  • Janitha
    Posted on

    Janitha Janitha

    Reply Author

    Coolest Div Show & Hide Script ever. Thankx…


  • Uday
    Posted on

    Uday Uday

    Reply Author

    Hi, I need to write similar effect if user checks… a radio button. If he clicks ‘Yes’ then it should show else it shouldnt show. Thanks!


  • Danny
    Posted on

    Danny Danny

    Reply Author

    Thanx for the script. I got it working in less than half an hour. I use it to make the subnav standard nog longer than 10 items. Clicking on the “show more” button shows the rest of the items.Superb!


  • jackm
    Posted on

    jackm jackm

    Reply Author

    Thank you, it’s cool tutorial helped for me.


  • Geobert Adan Son
    Posted on

    Geobert Adan Son Geobert Adan Son

    Reply Author

    hi anyone could help me…. how about i have 100 title with hide content and show..is any one could know the array on it?
    like this one..
    $(“.slidingDiv”).hide();
    $(“.show_hide”).show();
    $(‘.show_hide’).click(function(){
    $(“.slidingDiv”).slideToggle();

    how could i make 100 DIV to make it short the code…I hope you could response with me :) thanks again…


  • RASUI71
    Posted on

    RASUI71 RASUI71

    Reply Author

    Hi there,
    Would someone help me to do some modification to the below mention code. I’m just a beginner. The below code does the hide and view part (div). But i want to do the same for many div tags. Ex. clickHere1 for detail1, clickHere2 for detail2, clickHere3 for detail4 etc. to view different info under each div.

    _____________________________________________
    $(‘#clickHere’).click(function() {
    $(‘#details’).slideToggle(‘slow’, function() {
    // Animation complete.
    });
    });
    _____________________________________________

    Thanks. 😉


  • koushik
    Posted on

    koushik koushik

    Reply Author

    @mike
    use the slidetoggle function. If your div is in show status it will automatically slide up to hide the div (footer).


  • mike
    Posted on

    mike mike

    Reply Author

    Hi, can anyone let me know how to get the div to slide up instead of down, as im putting it in a footer?

    thanks in advance :-)


  • Bay Area Webdesigner
    Posted on

    Bay Area Webdesigner Bay Area Webdesigner

    Reply Author

    perfect! Thank you!


  • Chem
    Posted on

    Chem Chem

    Reply Author

    hi,

    great article but its not working on my IE 7 browser. It works in chrome, FF, IE8 but not IE7.

    Can you guide please.


  • Jayendra kumar
    Posted on

    Jayendra kumar Jayendra kumar

    Reply Author

    Hi,

    Thanks to share this article.


  • Pat
    Posted on

    Pat Pat

    Reply Author

    Hi Ashley!
    Thank you so much for this new article!


  • Andy
    Posted on

    Andy Andy

    Reply Author

    HI Ashley,

    Lot of people have asked this problem but there is no proper answer to it and you haven’t replied to this problem yet?

    How can we show/hide multiple divs? I have a list of data that is popping up from the database and i want to show one div at a time and when i click on other show link, the first one closes and second one pops out.

    Looking forward to hearing from you soon.

    Thanks
    Andy


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      Hey,

      For everyone on this thread that is looking to show and hide multiple divs i’ve just posted a new article on how to do this using a plugin i’ve just written.

      Any questions leave a comment and i’ll try to respond!

      http://papermashup.com/jquery-show-hide-plugin/

      Ashley


  • Jerry
    Posted on

    Jerry Jerry

    Reply Author

    Hey, this is great.

    1 question. How can I have a seperated link for show and a seperate link for hide?


  • Wanderson
    Posted on

    Wanderson Wanderson

    Reply Author

    Hi Ashley,

    Thank you so much for the tutto! Made my day, by the way, now it has been 13 hours after many resources that I´m trying to put the code to work on the server without success.
    Here goes the link: http://www.andreiazito.com.br
    Locally it works fine, but on the server not. Any tip?
    Thanks in advance for your help.

    Greetings from Brazil!


  • Tanveer
    Posted on

    Tanveer Tanveer

    Reply Author

    hey thnx!!

    but is it possible to collapse this towards left from right. is there any way to change the direction from going down to going leftwards ?

    appericiated


  • Juan Dixon
    Posted on

    Juan Dixon Juan Dixon

    Reply Author

    Thank you, this is a quick and easy approach to hiding and showing divs in a few lines. I used this to create a div popup message.


  • Pat
    Posted on

    Pat Pat

    Reply Author

    Hi everyone and Hi Ashley!
    I’d like to use more than one div, and these divs are positioned one above the other using css positioning.
    The problem is that the div under is not clickable. Anyone know how I do for make clickable these divs?

    Thanks so much.


  • Kingsley
    Posted on

    Kingsley Kingsley

    Reply Author

    Hi Ashley,

    Thanks for sharing again. Is awesome.
    I had try to implement the script in my project, but i got a issues.
    Is run very well in all the browser, but except ipad and iphone safari.

    I hope it can stick to the bottom. Do you have any idea?
    Hope can get your news soon.

    Thanks again.

    Best Regards,
    Kingsley.


  • Manish
    Posted on

    Manish Manish

    Reply Author

    Its not working with jquery-1.6.2.min.js why? please help


  • Jesper
    Posted on

    Jesper Jesper

    Reply Author

    Thanks for this great tutorial.
    I used your script on a projekt, but now I want to have more than one show/hide div on each page, and I cant get it to work, on click all divs is opened.

    I read all comments, and I cant find a working solution to this multiple show/hide problem. Could you give me an example ? Im not very good at javascript, and jQuery.
    Thanks in advance….


  • JeLBee
    Posted on

    JeLBee JeLBee

    Reply Author

    how to show a small amount of text when its currenly hiding the content just like youtube description?


  • Jeroen
    Posted on

    Jeroen Jeroen

    Reply Author

    I’ve got exactly the same problem as Jason has.
    Any input would be appreciated!


  • Francsico
    Posted on

    Francsico Francsico

    Reply Author

    Mabe this will help some one like me :); I get this code, but I need more than 1 show/hide panel, so what i did its :

    $(document).ready(function(){
    $(“.slidingDiv”).hide();
    $(“.show_hide”).show();
    $(‘.show_hide’).click(function(){
    $( this ).next( ‘.slidingDiv’ ).slideToggle();
    });
    });

    And works perfect := hope can help


  • Joseph
    Posted on

    Joseph Joseph

    Reply Author

    You should add “return false;” in the function so that the page doesn’t jump up every time show/hide link is clicked.
    Like this:
    $(‘.show_hide’).click(function(){
    $(“.slidingDiv”).slideToggle();
    return false;
    });


  • Jason
    Posted on

    Jason Jason

    Reply Author

    Ashley, I was hoping to use this to be able to show and hide comments on a blog similar to yours. However, the clicking of the show and hide adds a hash tag to the URL and brings back to the top of the page. How can I remove that so it doesn’t move the users positing on the page?

    Here’s my script:

    $(document).ready(function(){
    $(“.slidingDiv”).hide();
    $(“.show_hide”).show();
    $(‘.show_hide’).click(function(){
    $(“.slidingDiv”).slideToggle();
    $(this).text($(this).text() == ‘Hide Comments’ ? ‘Show Comments’ : ‘Hide Comments’);
    });

    });


  • EDD
    Posted on

    EDD EDD

    Reply Author

    Ashley How can Use this fancy tool with many others divs?


  • Marie-Laure
    Posted on

    Marie-Laure Marie-Laure

    Reply Author

    I used this to great effect – Many many thanks Ashley!


  • James
    Posted on

    James James

    Reply Author

    If I remove the height from the css it works fine but expands further than it should (about a line break further) and then pops back. Is there anyway to get around this? Without setting the height?


  • Web Development
    Posted on

    Web Development Web Development

    Reply Author

    Very nice and simple script. It should be very useful for my new website, thanks for sharing it.


  • kalman
    Posted on

    kalman kalman

    Reply Author

    Thanks for this code and tutorial (especially the new updated version), very helpful.

    One issue:

    When clicking on the link, the box does not lay over (if that is the correct term) images that are below it.

    In other words, I only see the parts of the box around an image that happens to be located below the link.

    Any ideas on how to fix this?

    Thanks,
    Kalman


  • Rich
    Posted on

    Rich Rich

    Reply Author

    I got the code to work which is good, but then I tried using it in an xsl page I wrote which loops through an html table. I’m having trouble figuring out how not to get the div to display in each row of the table. Can you put an id on the div and only make it appear for certain rows in the table? I’m not sure how to do this. Has anyone seen any examples of something like this?
    Thanks


  • Kristen Stewart
    Posted on

    Kristen Stewart Kristen Stewart

    Reply Author

    OK I’m also having a problem i got both of the buttons to work but [ how do i have only button 1 show without button 2 showing at the same time when i click on button 1 ???

    and + is there away to slide the text coming out for the slide? ] like

    slide overflow = hidden
    }
    overflow: hidden;
    position: absolute;
    left: -869px;
    top: 5px;

    do you see what i mean
    [away for the slide to come into frame]???

    Please Help me ^ ~ ^ .


  • Sara
    Posted on

    Sara Sara

    Reply Author

    Works great. The only problem is that I also have infinite scrolling (javascript) and when reaching the second page, the div content automatically shows and can’t be hidden. Here’s what I mean: http://beautifulbeautifulmoon.tumblr.com/


  • Seb
    Posted on

    Seb Seb

    Reply Author

    Awesome!
    Thanks for this.


  • George Hatzi
    Posted on

    George Hatzi George Hatzi

    Reply Author

    @roxics – have you tried reversing the display:none;

    .slidingDiv{display:none;}
    .show_hide{display:block;}

    also this might be useful for when you want multiple links under the same class. (the more you get into this the more complex it gets :))

    $(document).ready(function() {
    $(‘.show_hide’).click(function(e) {
    e.preventDefault();
    $(this).next(“.SlidingDiv”).slideToggle();
    });

    });


  • roxics
    Posted on

    roxics roxics

    Reply Author

    Thanks for the script, but having two issues:

    1. How do I show the slidingDiv by default so that it can be hidden when the button is clicked? I want to hide a menu bar when people don’t want to see it, but it has to show when coming to page so that people know it’s there and can chose to hide it.

    2. I put the show/hide link below the div I want to slide up/down. But it seems to be riding up into my slidingDiv (overlaying it) even when I put a position:relative into the CSS for both div’s to try and keep it below. I’ve used an image instead of a text link. I want to keep it below the slidingDiv at all times. The concept is that the image looks/acts like a handle for a drawer that slides open or closed from the top of the screen when you click it.

    Any help would be appreciated. Thanks :)


  • ovidiu
    Posted on

    ovidiu ovidiu

    Reply Author

    Hey Ashley,

    you seem to have had a problem on your site. I tried commenting and I couldn’t. It seems there is a cache somewhere, it tells me I am logged in as Ashley :-)

    here is a screen shot: http://screencast.com/t/VNSLLVTO

    and here is my comment:

    thx for updating it.
    meanwhile I got things done testing and experimenting. loading this external js file works for me (in addition to loading jquery of course):

    `function ShowHide(){ $j(“#comments-template”).animate({“height”: “toggle”}, { duration: 1000 });}
    document.write(‘#comments-template {display: none;}’);
    `

    will try your updated tutorial though :-)
    commenting seems to work for me again :-)


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      Hey Ovidiu,

      Thanks for your email and comment! yes i was updating the site yesterday and it must have cached my logged in session.

      Hope the updated post works for you!

      Ashley


  • ovidiu
    Posted on

    ovidiu ovidiu

    Reply Author

    can you please expand this tutorial? we need to set the div to hidden on js load. if we hide it by default with display: none, users with js disabled will never see it…
    so it needs to be hidden by js onload so that if a user doesn’t have js turned on he will still see it…


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      Hi Ovidiu,

      I’ve now adapted the tutorial for users that don’t have JS enabled.

      Ashley


  • Ovidiu
    Posted on

    Ovidiu Ovidiu

    Reply Author

    I have used this on my wordpress blog i nthe template for the frontpage and it works great. in the tempalte for single view, it doesn’t. I get some js error, please see here: http://screencast.com/t/o7boSs1X

    any idea what could be wrong?


    • Stanley
      Posted on

      Stanley Stanley

      Reply Author

      | When I design any weebstis I am always keeping my logo below the banner. Until I read your post I don’t know about “vertical” style. I have evaluated the code with the sample file its working fine. Thanks


  • Chance
    Posted on

    Chance Chance

    Reply Author

    You can set the sliding divs to a certain height to make sure that they all slide out the same height when they are each expanded by setting the css style to

    #slidingDiv8 {
    display: none;
    height:424px;
    }

    You can choose your own height


  • Chance
    Posted on

    Chance Chance

    Reply Author

    How can I get the height of the div to be a certain height when expanded?

    I am using min and max width and those settings I have set are fine but when the div is expanded I want it to expand to a default height.


  • Chance
    Posted on

    Chance Chance

    Reply Author

    Thank you for this tutorial! Although, you forgot to mention that you needed to add this CSS to make it hide automatically.

    #slidingDiv
    {
    display: none;
    }


  • Ovidiu
    Posted on

    Ovidiu Ovidiu

    Reply Author

    hi there, I plan on using this on a new site I am designing that will feature pictures. the element I want to show/hide is the story behind the picture.

    I think I know how to do this with your tutorial but I was wondering if keeping the story hidden, won’t stop google from indexing that hidden content part?

    the visible content part is only a picture so this seems counter productive to me….

    any idea how to get indexed while still not showing the story behind the picture, only if the visitor clicks: read story?


  • faisal
    Posted on

    faisal faisal

    Reply Author

    can anyone please tell me why return false; is used in the HTML
    what if we use return true; is that a substitute for if condition ?/

    regards
    faisal


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      Hi Faisal,

      The ‘return false;’ in this case stops the browser from jumping to the current location, as indicated by the href=”#”. It’s useful for when you want to add events to anchor tags, but don’t want the browser jumping up and down to each anchor on each click.

      An example of using return true, would be:

      Click Me

      What happens here is when the link is clicked an alert will appear if we’d put ‘return false;’ here, once we’d closed the alert box nothing would happen, but with ‘return true;’ the href will click through to ‘somepage.html’ once the alert is closed.

      Hope that helps!

      Ashley


  • Trace of wind
    Posted on

    Trace of wind Trace of wind

    Reply Author

    Add this to the jquery script to set the div as hidden by default:

    $(document).ready(function() {
    $(‘div#slidingDiv’).hide();
    });


  • Diego
    Posted on

    Diego Diego

    Reply Author

    For those of you wondering how to hide an open div when opening a second one, try this:

    function ShowHide(){
    $(“#slidingDiv”).animate({“height”: “toggle”}, { duration: 500 });
    $(‘#slidingDiv2:visible’).animate({“height”: “toggle”}, { duration: 500 });
    }
    function ShowHide2(){
    $(“#slidingDiv2″).animate({“height”: “toggle”}, { duration: 500 });
    $(‘#slidingDiv:visible’).animate({“height”: “toggle”}, { duration: 500 });
    }

    I’m sure if you add numbers to your multiple divs you may want to use a for loop, in this case I just copy pasted the first function and changed the names so the second function would work for the second div. The second line in each function just detects if the other div is open and closes it.

    Cheers, hope this helps anyone out there.

    Thanks Ashley for such a simple script.


  • Max
    Posted on

    Max Max

    Reply Author

    Great and simple..


  • Mike
    Posted on

    Mike Mike

    Reply Author

    I installed two instances of this script on my site here:
    http://stretchshapes.net/authentication.php?back=order.php?step=1

    and I am trying to figure out why the second one will only open, then reopen.. Its an annoying glitch. Do you know of any way to fix this?

    Other than that super simple and very effective!

    Thanks!


  • Mikael Cedergren
    Posted on

    Mikael Cedergren Mikael Cedergren

    Reply Author

    Yeah, this was absolutely beautiful! Simple and extremely effective. Awesome and thanks a bunch for the tip mate.

    Mikael.
    http://www.sixtycards.com – Magic The Gathering For The Casual Player


  • straighte180
    Posted on

    straighte180 straighte180

    Reply Author

    I am using the version by JM (above) for multiple show/hiding of divs

    function ShowHide(d){jQuery(d).animate({“height”: “toggle”}, { duration: 500 });}

    This is working perfectly in all browsers EXCEPT for FIREFOX for both Mac and PC. I don’t think JM tested it in Firefox perhaps?

    Can someone please do a test for this and post a fix for it ASAP – I’m not good enough at javascript to do it myself.

    Thank you to the legend that you are


  • Carl
    Posted on

    Carl Carl

    Reply Author

    I’ve used this to hide one div when showing another. It works great, but i don’t know if it’s 100% valid (don’t know much about javascript).

    //


  • Dominic
    Posted on

    Dominic Dominic

    Reply Author

    Hi Ashley,

    This code is great and easy to use. A problem that I’ve run into is caused by the content of the div. The div contains this gallery: http://finnrudolph.de/ImageFlow .The problem is that when the div is set to display:hidden (which is what I want the default to be) the gallery doesn’t load. If the style display:hidden is not set then everything works fine, the gallery loads properly and then the show/hide div also works properly. I would really appreciate some help from you since I would so much like to use your show/hide div, but unless I can get a way to have this working I will have to abandon it.


  • jay dorsey
    Posted on

    jay dorsey jay dorsey

    Reply Author

    Thanks for the script. I was looking for something I could use with the toggle below the hidden content. This worked nicely.

    Wondering about smoothing the ending and beginning of the action? (the “clunk” referred to by another commenter)….and solutions?

    Thanks.


  • Sənan Kamal Quliyev
    Posted on

    Sənan Kamal Quliyev Sənan Kamal Quliyev

    Reply Author

    Hi, i wanna the first it hidden when user click this will be visible. How i do it?


  • รับทำเว็บไซต์
    Posted on

    รับทำเว็บไซต์ รับทำเว็บไซต์

    Reply Author

    Truly nice and well written article.


  • Fábio Crestani
    Posted on

    Fábio Crestani Fábio Crestani

    Reply Author

    There is a little problem with Chrome or Firefox.
    If I use a input text for a login system, for example, I can’t click and type directly in the text box, I need to click in the border of the text box.

    Does anyone know who to fix it?


  • javanoobie
    Posted on

    javanoobie javanoobie

    Reply Author

    Interesting topic.
    However i can’t find anywhwere on the internet to solve my problem:

    i have 8 buttons (either textlink, image link or onclick(hotspot using imagemapping)
    and only one big main div that will show the content of a hidden div.
    I also have 8 divs, which i need to be hidden at startup , preferably with no little glitch in IE (sometimes you briefly see al the hidden div content, i have seen this in many examples online)

    when pressed on button1 i need the div to slide in, but if theres a div visible(user pressed one of the 8 buttons before) i need that to be slide out of view.
    and when its out of view, automatically slide in the div that corresponds to the clicked button.
    this should work for my 8 buttons and if possible for more should i need more in the near future.

    i know this might be near to impossible , but i see this being done many times in flash, and since jQuery will eventually move flash(read it in a post somewhere)
    i wondered if that would be possible to make.

    so my question would be to you: can this very difficult code be done in jquery?
    so no asp, no php, no mysql, just plain jquery.

    regards

    jquerynoob


  • chad
    Posted on

    chad chad

    Reply Author

    Hi all-
    Great script. I’m using it on 3 of my websites right now.

    A question I had was: how do I implement this script more than one time on one web page?

    I’m not sure if a solution was actually reached anywhere above or not — I couldn’t find one — but I have found the solution: I clone everything, including my script in the header of my page, but I change two key aspects of the cloned script. I changed the code “ShowHide()” into “ShowHide2()” … and I changed the name “slidingDiv” into “slidingDiv2″. Changing these things within the header script as well as within the body of my html has allowed me to have two separate divs show and hide independently of one another on the same page. It seems to work in multiple browsers (FF, IE, Chrome, etc.).

    Hopefully this is helpful.


  • Carl
    Posted on

    Carl Carl

    Reply Author

    First off all thank You for this awsome script!
    I’m also one of them who want’s the possibility to hide one div when showing another.


  • Lee
    Posted on

    Lee Lee

    Reply Author

    Works perfect – many thanks!!

    I have set it so that it hides/reveals a div on hover using ‘onmouseover’ but is there any way it can be set to show the div on ‘mouseover’ and then hide it as the cursor moves off it?

    Thanks in advance……….

    Lee


  • Party Tents
    Posted on

    Party Tents Party Tents

    Reply Author

    Well I am pretty new to this field, so I got some important description, information and explanation about scrip/cords. Thanks for sharing; this stuff is pretty much important to me these days.


  • IT Support
    Posted on

    IT Support IT Support

    Reply Author

    it works great. one little question on a variation.
    let’s imagine i have the Show/Hide button-link in the middle of the page.
    text/content above and bellow.
    set div1 for the content above and div2 for the content bellow.
    you want the page to display at loadup the div1 content (the content above the show/hide link) and hide the one bellow.
    when you click on the show/hide … you want the div1 to be hidden and div 2 to shown and due to the sliding … obviously to slide in the space div1 would normally take.
    when you click it again … to toggle back to the div1 visible and div2 hidden.

    How would you guys code it ?


  • joe
    Posted on

    joe joe

    Reply Author

    I like your show/hide solution, but how do I get a particular hidden div tag to open when i click a link from another page?

    I need 10 different hidden div tags which 10 different links will open the perspective hidden div. But, I also need to link to each hidden div from another page and have the link on this page show the hidden div. I can’t figure that part out???? help me please!!!!!


  • cryoffalcon
    Posted on

    cryoffalcon cryoffalcon

    Reply Author

    well thanks for sharing its really easy to use.
    take care.


  • Joao
    Posted on

    Joao Joao

    Reply Author

    hey! I try to use your code, but in my page the div appears first, and i want that first appears somethin like “Login” and onClick shows something. I saw your demo and it runs just as i want, but in my page that didnt happen. Do you know why is that?

    Thaks, and sorry my english


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      Hi Joao,

      Just set the div to display:none in the CSS. that should do the trick.

      Ashley


  • RafalP
    Posted on

    RafalP RafalP

    Reply Author

    Nice JOB – good & simply :) thats it!
    thanks


  • nagarathna
    Posted on

    nagarathna nagarathna

    Reply Author

    hey do anyone know how to navigate multiple divs in a same page and at the same position using prev and next link???
    i have done it in javascript but not able to do it in jquery….

    var curid = 0;
    var id = [‘a’, ‘b’, ‘c’, ‘d’];

    function showNext()
    {
    if(curid 0)
    {
    document.getElementById(id[curid]).style.display = “none”;
    curid–;
    document.getElementById(id[curid]).style.display = “block”;
    }
    }

    hello
    good morning
    good afternoon
    good evening

    Previous
    Next


  • Raielene
    Posted on

    Raielene Raielene

    Reply Author

    I don’t know jquery at all, but I have your example working for me. Problem is that I need multiple instances on one page and I can’t figure out what that would look like as far as the html (and script?) Can someone please spell it out for me??? Thanks!


  • Dido
    Posted on

    Dido Dido

    Reply Author

    Hey i like it because it is so simple but how do i make it work on two divs?

    thanks


  • Ashley
    Posted on

    Ashley Ashley

    Reply Author

    Hi Jay,

    this can happen if you have padding or margins on the div or element that your trying to show/hide. I’d always recommend wrapping your content within another div and applying padding or style to that and leave the animating element clean from style.

    Hope that helps.

    Ashley


  • Jay
    Posted on

    Jay Jay

    Reply Author

    Can anyone shed some light on this… I have implemented this but when its in a table, and when i click on closing/hiding a panel, the content in another cell flickers.

    It seems the content of the TD flickers to the last position.


  • Christopher Kocksch
    Posted on

    Christopher Kocksch Christopher Kocksch

    Reply Author

    Hi, thanks a mil for that script !
    I’m using it with multiple div on one page.
    I just need help for one thing, how can I make that when a div “A” is open and user click on link for div “B”, it closes div “A” and opens “B” instead of opening both.

    Thanks for your help !

    Chris


  • SweetEmerald
    Posted on

    SweetEmerald SweetEmerald

    Reply Author

    Hi
    I have a question.
    I’m new using JQuery, and, I want to do this…

    I have a table with 5 columns, I want to show column by column, first show the 1st column, after 5 seconds hide this column and show the 2nd column, and when I show the 5 column hide this and return to the 1st.
    All this automatically, without a button click

    If is more easy with divs I can change this columns for divs

    Could you help me please!


  • Rajinder Sharma
    Posted on

    Rajinder Sharma Rajinder Sharma

    Reply Author

    its very simple and easy for implementations.thanks dear ……..:)


  • eMonkey
    Posted on

    eMonkey eMonkey

    Reply Author

    Hi JM,
    I am trying to get multiple divs to show/hide. In a post above you state:
    —————–
    Now, for each of your links, they should look like this:
    Show/hide
    Of course remember you’ll need to replace “slidingDiv” with whatever the ID is of the div you want to hide/collapse.
    ——————

    I can not see what code to use on the links is….?

    Thanks,


  • jonn b
    Posted on

    jonn b jonn b

    Reply Author

    i think i found a good a start to my solution.

    it doesn’t do anything fancy but it works and you can put all the divs in a container div and position it that way, and style all the links, divs etc….

    i’m pretty sure i can get this working for me in a couple days.

    here’s the link: http://www.bugimus.com/gurus/multi_divs.html

    if anyone with any javascript knowledge wants to add a fade in etc…that would be cool. if it’s possible.


  • jonn b
    Posted on

    jonn b jonn b

    Reply Author

    Ok how would this work:

    I have the same question as a few others here, and probably many many more online who are new jquery but just wan to implement enough to make a page work.

    question:

    easiest way i think:

    Can you set this up to–> on click (of a span class or something), show 1 div class, and hide a few others? The divs will be in the same area/container div with a separate class (so they all stay in the same place)

    The thing is they will not all be showing on the page load, only the first one, so then you click the next “link” and that div hides the current one and shows the new one. My theory is to put all the divs except the one you want to be shown in the hide class or whatever,and that is going to be different for each “link”/span…….so no matter which link is clicked it will hide the current one and show itself.

    I can do all the css/html, it’s just I’ve very green when it comes to javascript.


  • Peter
    Posted on

    Peter Peter

    Reply Author

    good tut. I intend to implement this in my project tonight. Thanks for the help


  • Dajapajo
    Posted on

    Dajapajo Dajapajo

    Reply Author

    It nice, but I have problem.
    If it’s possible did you explain, For example
    when I click button#1, div#1 slides out. But when I click button#2, div#1 retracts and div#2 slides out.


  • Dienekes
    Posted on

    Dienekes Dienekes

    Reply Author

    Instead of calling animate method and writing that much of code, one can use helper methods like slideToggle to achieve the same purpose.


  • rodolfo Almaraz
    Posted on

    rodolfo Almaraz rodolfo Almaraz

    Reply Author

    One dude men, great script anyway, how can i control the div that arw shown,the problem is when i click one of the divs slide all divs i want that the script slide the clicked one only and hide the clicked not all at same time


  • chickc
    Posted on

    chickc chickc

    Reply Author

    “you can simply use a class instead of an id this will allow you to apply the effect to more than one element without duplicating your javascript.” 2 February 2010 at 8:52 am–Ashley

    Ashley–

    I’m kinda new to this. Exactly how would that look with the CLASS. No change to the script, just to the HTML?

    I have several lengthy bios where I need to have multiple show/hides on one page.

    Thanks.


  • Luke
    Posted on

    Luke Luke

    Reply Author

    Thanks!
    I love it!


  • Abu Backer
    Posted on

    Abu Backer Abu Backer

    Reply Author

    Thankyou very much for this trick! loved it :)


  • Daniel
    Posted on

    Daniel Daniel

    Reply Author

    Exactly what I was looking for :-] I plan on learning jQuery later this summer but still have to do many stuff like that before. Awesome.

    (and btw: I really love your blog title hidden in the html source)


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @ Daniel,

      ha ha thanks you’re the first one to notice 😉


  • Josh
    Posted on

    Josh Josh

    Reply Author

    Where exactly in your code would I insert display:none so that the text is hidden when the page first loads rather than it being displayed and the user having to click to hide it?


  • Akos
    Posted on

    Akos Akos

    Reply Author

    Hello,

    May you help me?

    The code is super, working in IE, Chrome, but no working in Firefox 3.6 on my site.

    http://www.gohelp.hu/csomagjaink/assistance

    Many thanks,
    Akos


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      Hi Akos,

      I can’t see anywhere on that page that has the code included.

      Ashleu


  • John
    Posted on

    John John

    Reply Author

    hi, i’m getting conflict with others jquery aplication…

    i try alots of examples..but nothing work

    jQuery.noConflict();

    // Put all your code in your document ready area
    jQuery(document).ready(function($){
    // Do jQuery stuff using $
    $(“div”).hide();
    });

    ….still don’t wotk, any help?


  • Moses
    Posted on

    Moses Moses

    Reply Author

    Hi,
    Can you please provide some code where the caller can determine if to hide or show the div depending on a variable passed to the function by the caller!!


  • miked
    Posted on

    miked miked

    Reply Author

    Hi there JM, thanks a million for that, very speedy reply. Regards, Miked.


  • miked
    Posted on

    miked miked

    Reply Author

    Hi Ashley, thanks for a great script. I have a quick question which I think was touched on here earlier. If you want multiple show/hide links on one page, is there a way to hide the content from one link when you click on a second link? Cheers Miked


  • JM
    Posted on

    JM JM

    Reply Author

    How to have multiple divs each with their own hide/collapse links.

    First of all, it’s good practice to replace the “$” symbol with “jQuery” as the “$” is a reserved symbol in WordPress for the Prototype library.

    Second, I made a few adjustments to the function. Here is my altered function:

    function ShowHide(d){jQuery(d).animate({"height": "toggle"}, { duration: 500 });}

    Notice I added “d” in the ShowHide function as an argument as well as in the jQuery function.

    Now, for each of your links, they should look like this:

    Show/hide

    Of course remember you’ll need to replace “slidingDiv” with whatever the ID is of the div you want to hide/collapse.

    Hope that helps,
    JM


  • Tyler Plack
    Posted on

    Tyler Plack Tyler Plack

    Reply Author

    Thank you so much! I’ve been looking for this jQuery effect for so long in a way that simply works.


  • Jono
    Posted on

    Jono Jono

    Reply Author

    Thanks this work perfectly!


  • iDoktor
    Posted on

    iDoktor iDoktor

    Reply Author

    Also, why am I loosing show/hide feature when centering the Show/hide!
    with tags?


  • iDoktor
    Posted on

    iDoktor iDoktor

    Reply Author

    Is there a way to make it hidden by default?

    Alo, how to get rid of the white empty space after “hiding”?

    Btw, great and simple tutorial!


  • pikciu
    Posted on

    pikciu pikciu

    Reply Author

    Please, help us to be able to post 2 or more sliding div in one page. Thanks.


  • Patrick
    Posted on

    Patrick Patrick

    Reply Author

    Here’s what I have so far, it works but the only problem is if the User click Single and the Couple it does not close the other one, both stay open. How do I close the other div one a new one is shown?

    //

    Single Male or Female
    Couple

    This is for SINGLES
    This is for COUPLES


  • Patrick
    Posted on

    Patrick Patrick

    Reply Author

    Hi Ashley great script. How would a class be used to allow multiple elements?


  • Steve Hanley
    Posted on

    Steve Hanley Steve Hanley

    Reply Author

    Great tut!
    Is there anyway to stop the clunk at the end when the div hides and shows?

    thanks
    Steve


  • Milan
    Posted on

    Milan Milan

    Reply Author

    Is it possible to create this as a plugin so that use would be more simple if we have more than one show/hide div? For example, onclick=”$(‘#slidingDiv’).showModal(); where slidingDiv is a ID of div.

    By current use we need to create function for each div.

    (btw, you should install some subscribe to comments plugin for easier tracking of replies on comments)


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @Milan, you can simply use a class instead of an id this will allow you to apply the effect to more than one element without duplicating your javascript. Thanks for WordPress comments plugin tip i’ll look into this.


  • Antonio
    Posted on

    Antonio Antonio

    Reply Author

    Hey, please help, again. 😀

    So, now I would need this:

    when I click button#1, div#1 slides out. But when I click button#2, div#1 retracts and div#2 slides out.

    Is that possible with your script?


  • sorosh
    Posted on

    sorosh sorosh

    Reply Author

    Awesome! I use it now on my site;) Thanks!


  • Antonio
    Posted on

    Antonio Antonio

    Reply Author

    Wow, that was fast response. : D And helpful too, this solved my problem of the day, thank you. ; )


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @Antonio no problem, anytime 😉


  • Antonio
    Posted on

    Antonio Antonio

    Reply Author

    Uhm, yeah I have a question? Ok, so, I need DIV to be hidden by default, I don’t see any part of your script that I could mess with to do that, so, can you help me?


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @Antonio all you need to do is set the style of your div to be display:none; so the div will be hidden on page load. Let me know if you have any further questions


  • Antonio
    Posted on

    Antonio Antonio

    Reply Author

    Finally something REALLY simple that WORKS. Thanks a LOT man. Cheers. :)


  • Hanna
    Posted on

    Hanna Hanna

    Reply Author

    Hi, this is a great thing! But how do I do if I want more than one show/hide div on one page?


  • Rocky
    Posted on

    Rocky Rocky

    Reply Author

    Its like desigining a block of code which will render the object, and setting up some sort of config which will be used to load the animation and setting a trigger.

    In This Case: Onclick renders the effect

    while the div tag:

    Contains The Result Of Our Ajax File


  • Josh
    Posted on

    Josh Josh

    Reply Author

    I was wondering could you use both height and width to make it seem to slide in from corner to corner? Interesting effects are possible with jQuery


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @josh yeah you can make it slide in from the left by changing ‘height’ to ‘width’


  • Brian
    Posted on

    Brian Brian

    Reply Author

    So many awesome things you can do with Jquery, althogh this effect dosen’t seem to work that well, It jumps a bit is what I mean lol, that’s my only digg on it 😛 lol

    Anyway, awesome post! I will tweet it… for what good it will do with my 47 followers 😛

    Brian