HomeОбразованиеRelated VideosMore From: thenewboston

jQuery Tutorial - 47 - Hide/Show a DIV

285 ratings | 81410 views
Facebook - https://www.facebook.com/TheNewBoston-464114846956315/ GitHub - https://github.com/buckyroberts Google+ - https://plus.google.com/+BuckyRoberts LinkedIn - https://www.linkedin.com/in/buckyroberts reddit - https://www.reddit.com/r/thenewboston/ Support - https://www.patreon.com/thenewboston thenewboston - https://thenewboston.com/ Twitter - https://twitter.com/bucky_roberts
Html code for embedding videos on your blog
Text Comments (60)
wonderful! thanks for this. useful stuff
Turi Caederynmab (8 months ago)
SWEEEEEEEEET SWEET VICTORY YEAH!
Azi Bayati (1 year ago)
Thank you very much. your videos are very understandable and you explain very nice.
Michael Moore (1 year ago)
I am trying to hide/show based on the login status. We are using google and facebook login. We set a div id="welcome" for when they login, and it would say, "welcome michael". We are trying to hide the page if they havent logged in, and show the page if they have. We have got a basic .click function working, but is there a way to set it if the getElementById("Welcome") == "login" to hide, else to show? This is our jquery function. $(document).ready(function(){ $("#hide").click(function(){ document.getElementById("take_our_survey").style.display = "none"; document.getElementById("speed_test").style.display = "none"; document.getElementById("about_you").style.display = "none"; }); $("#show").click(function(){ document.getElementById("take_our_survey").style.display = 'block'; document.getElementById("speed_test").style.display = "block"; document.getElementById("about_you").style.display = "block"; }); });
Mar Grip (2 years ago)
If you are having trouble with this, try: $(document).ready(function(){ $('#hideshow').click(function(){ $('#message').toggle(); if ($(this).html() == 'Hide'){ $(this).html('Show'); } else { $(this).html('Hide'); } }); });
André Torres (2 years ago)
Hello!! i have a question! When i refresh the page, i want that the div stay hide first and then just when i click show it appear. But when i refresh the page the div always appears first. Can you help me please ?
SINIKIWE NANGOKU JUMBA (4 months ago)
did you manage to achieve it , any links that you would refer me to !
godisnotinvisible (1 year ago)
That's precisely what I'm trying to do.
Alphanzo Arthur Oliver (3 years ago)
waste of time, even comments don't help :/ at least in my experience.
Milan Janjevic (3 years ago)
I did it this way: $("#hideshow").click(function () { if($(this).text() == "Show") { $(this).text("Hide"); $("#message").hide("#hideshow"); } else { $(this).text("Show"); $("#message").show("#hideshow"); } });
Milan Janjevic (1 year ago)
:)
Alfrick Opidi (1 year ago)
thanks
Milan Janjevic (2 years ago)
np :D
Joe ke (2 years ago)
+Milan Janjevic Thank you
RNT GAMES (3 years ago)
this tutorial is not relevant any more. .toggle()  method was deprecated in jQuery 1.8 and removed in jQuery 1.9. so pls read commenrs for more help
bork (3 years ago)
be warned, this tutorial is not relevant any more. .toggle()  method was deprecated in jQuery 1.8 and removed in jQuery 1.9.
godisnotinvisible (1 year ago)
Thanks. Too bad..it was useful
Whois mike (3 years ago)
These video's are great keep up the good work
Eldan Shkolnikov (3 years ago)
Alex your tutorials are great. But you may want to consider removing this tutorial as it is already deprecated.
Morxplays (3 years ago)
$(document).ready(function() { $('#hideshow').click(function() { $('#message').toggle(); if($(this).html() == 'Show'){ var c_text = 'Hide'; } else { var c_text = 'Show'; } $(this).html(c_text); }); });
Phil Donnelly (3 years ago)
Well, I tried it in all it's forms including a direct copy from JSfiddle and none of it worked. Total waste of time.
Maolo92 (4 years ago)
WATCH OUT! This element is deprecated, you can now use $('#message').toggle() to toggle the visibility of the element. Do not use it as you saw in the video
Nino Lopez (4 years ago)
Fred has the right idea. Updated for jQuery 2.1.0 -- http://jsfiddle.net/NinoLopezWeb/x58PK/1/
Kosteri x (4 years ago)
Exactly the same as video 36. Waste of time.
Aldo Guillen (4 years ago)
Thanks, there is a way to do that using just HTML code, i mean without that message.js FILE. I need this for a blogspot page, please...
Fred Morris (4 years ago)
This is my solution, elegant and simple. $(document).ready(function(){   $("#hide_show").click(function(){  var txt = $(this).text();     $("#message").toggle(500);   if (txt == "Hide")   {  $(this).text('Show');   }   else   {  $(this).text('Hide');   }     }); });
bontov (4 years ago)
My solution: $('.hideshow').on('click', function() {         //when the button is clicked ,fire a fn     $('.hideshow').toggle();                       //change display style of buttons     $('#message').slideToggle();               //toggle slideUp and slideDown }); There are two buttons with class 'hideshow' 1st is 'Hide' ,2nd is 'Show' wich have style of display:none; When 'click' fires the callback fn toggles the buttons and the div #message. toggle() basically toggles the display style.
dougieladd (4 years ago)
Hi thanks for this, very helpful... how would you slide the div off screen? For example if the div was a side navigation item that you wanted to show/hide by sliding it off screen left.
dougieladd (4 years ago)
cheers mate...
MGApcDev (4 years ago)
You could try the animate() method. http://www.w3schools.com/jquery/jquery_animate.asp
hitch hiker (4 years ago)
does not work for me :( this is my html code <!DOCTYPE html> <html>   <head>           <meta charset="utf8">        <title>Show/Hide Div</title>        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>        <script src="message.js" type="text/javascript"></script>         </head>      <body>            <a href="#" id="hideshow">Hide</a>           <div id="message" style="width:300px; border:1px solid #777; padding:10px;">   ncsdfjnsdhcsdafvkh;wejfIWEHW   </div>            </body> </html> ============ and this is my js code   $('#hideshow').toggle(function() { $('#hideshow').text('Show');   }, function() { $('#hideshow').text('Hide');   }); CAN YOU HELP ME???
MGApcDev (4 years ago)
It's pretty simple actually, the toggle method has just changed a bit since this was posted. Replace your js code with this: $(document).ready(function(){   $("#hideshow").click(function(){     $("#message").toggle(1000);   }); }); If something in the tutorials doesn't work, try to Google it. http://www.w3schools.com/jquery/eff_toggle.asp
Stuart Kaufman (5 years ago)
What if we are wanting to switch between images as the button in place of text. If someone could please comment on this modification I'd be most appreciative. Thanks
misha goldvarg (5 years ago)
IF ITS DOSNT WORK - keep evreything the same but in the first line REPLACE .toggle IN .click that all , if its still donst work , write all your css properties in a diffrente file, and than its will work 100%
Nicholas Izundu Iloba (5 years ago)
use display:none in css by targeting the specific div u want hidden.
fouad lee (5 years ago)
the same thing is happening to me !! any help
Didnt read LOL (5 years ago)
It works exactly the same way: jsfiddle.net/YKwyU/
UKAdamM (5 years ago)
This guy is still good though
f4st1ll0 (5 years ago)
my soloution for this(as the toggle() function has changed by time): var state EQUALS 0; $('#hideshow').click(function() { if(state EQUALS EQUALS 0) { state EQUALS 1; $(this).text('Show'); $('#message').toggle('fast'); } else { state EQUALS 0; $(this).text('Hide'); $('#message').toggle('fast'); } }); (to make it look like in Alex' example, remove 'fast', that it's only .toggle() //Don't forget to replace every EQUALS with the equals sign, youtube was complaining..
Radu (5 years ago)
with toggle() event it doesn't work to change the text on button so how can u make to change the text along with the hide/show or toggle of the div
0wner03 (5 years ago)
I miss bucky...
Colby Tobin (5 years ago)
My .toggle() function just makes the Hide anchor tag disappear. Is there anything wrong with it.
Gazudin (5 years ago)
another video about a deprecated function, another skip, yay!
sottKicker (5 years ago)
I have fixed it by adding both jquery files Download Version 1.6.4 (as seen in the first video he uses that one)
maddydk (5 years ago)
Problem @ with version jquery-1.9.1.js
Puda Battur (5 years ago)
Toggle hides the link instead of switching functions, dafaq? xDD
Nick Schreuder (6 years ago)
u should give the div's id's instead of classes. id's are meant for single use classes for more then once
Edizon Layug (6 years ago)
alex how will i do that if i have 2 or more div with the same class ? without opening other divs?
Marc Huyghebaert (6 years ago)
It's working fine in Chrome but not in Firefox or IE why. Can this be solved in anyway??
Chris Brown (6 years ago)
If you don't give toggle any parameters it automatically hides/shows
Chris Brown (6 years ago)
Yeah you'd just need to use a selector to grab the button then change the "src" attribute of the button in the same way you change the text within the div. So, $('#toggle_button').toggle(function() { //State 1 $(this).attr('src', 'image1.jpg'); }, function() { //State 2 $(this).attr('src', 'image2.jpg'); });
Jomar Llevado (6 years ago)
hello alex, I just want to ask where can i download the jquery file that you're using.
Marlon Figueroa (6 years ago)
Guardando!
kazu20091000 (6 years ago)
Why is 6:10 toggle able to hide and show div "#message?"
Rahil Wazir (6 years ago)
toggle is used for show and hide? :(
Rahil Wazir (6 years ago)
try $(document).ready(function(){ $('id or class or element').hide() }
H0b0Gamers (6 years ago)
@OhPlusOfficial In your css or internal page you would write "display : none". Thus hiding the Div.
Novica Vukobratovic (6 years ago)
@barryt06 That code has too much "diving into the pool" and taking the same elements over and over again.Also,you don't have to reference a link twice to do two things,you can say: $(this).text('show').next().hide(); all done,no need for $(this).text('Show'); $(this).next().hide(); Also,you are using too much of $(this) as i said.Create a var this = $(this); and just instead of $(this) always,just use this
Boduk Balonzo (7 years ago)
im here
iinsanebaby (7 years ago)
Great Tuts...

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.