Comments on: Basic Show and Hide

By: STOPBIT

STOPBIT — Mon, 11 Jul 2011 17:19:35 +0000

I just need the toggle function and to hide when the page loads, so updated the hide show js to this :

// basic toggle  - hiddeen when page loads
 $(document).ready(function() {
   $('#toggle').click( function() {
    $('div.showhide').toggle();
   });
      $('#toggle').ready( function() {
    $('div.showhide').toggle();
   });
});

I then simply used this code to display on the html page and of course matched the id name to "toggle". This means my h1 does not get hidden when the button is clicked only the class in the div :




  
    
      Table line 1
      Table line 2
	Table line 3

Hope this helps someone. It's so simply you could shake a stick at it.

By: Sman

Sman — Fri, 06 May 2011 16:20:10 +0000

I would like the show and hide be dependent on if there’s content being shown within a div tag (e.g. div#related). This would affect a header, like

My Header

. So if div#related doesn’t contain any content, hide

My Header

. If it does contain content, show the header.

By: martin

martin — Thu, 24 Feb 2011 14:43:15 +0000

i need some help… i’m in the process of testing a site, http://joryadamson.com, that uses the show/hide code. it’s all working perfectly in firefox, safari, opera, chrome and ie8 and 9. i even added a bit of extra scripting so that, as well as the toggle button, the pop up div closes when the user clicks anywhere away from it.

instead of doing what it’s supposed to in internet explorer 6 and 7, the pop up divs disappear when they’re clicked on and the #sign_in_popup div toggles visible.

forgive the messy layout in these 2 browsers as i’m still wrestling with the way ie6 and 7 are interpreting my css!

i’m not much of a jquery or javascript fiend so forgive me if fixing this amounts to childs play, but i’m stuck and getting more and more frustrated with it. any pointers/fixes would be very welcome indeed. thanks!

By: Shrikrishna Meena

Shrikrishna Meena — Mon, 08 Nov 2010 06:58:42 +0000

Same problem faced by me also, the div which opened previously via click remained opened…. tried many methods but failed… Help!!!

By: PAW

PAW — Fri, 03 Sep 2010 06:03:24 +0000

Hi Cel!
I think it is you selector that are wrong try to remove the a letter before the # so you only use the id as the selector ‘a#hide1′ should be ‘#hide1′

By: Cel

Cel — Tue, 20 Jul 2010 08:50:38 +0000

Hi Karl, I'm sorry to bother you with my question, but I've read all the comments in this post and on the next entry regarding this topic and I didn't find the solution. I've also read Working with events part 1 but I'm still having problems. I copied your code and the only thing I changed are the id's so they would fit on my css. I'm using the jquery lib 1.4.2 but I'm not using any ohter javascript/jquery plugin that could cause trouble, so my guess is I'm writting something wrong. Here's the js part:


$(document).ready(function() {
  $('#shown1').hide();
    
  $('a#show1').click(function() {
    $('#shown1').show('slow');
    return false;
  });
   
  $('a#hide1').click(function() {
    $('#shown1').hide('fast');
    return false;
  });
});

and here's the html for it:


 < a href="#" id="show1" > More < /a >
 < div id="shown1" > < a href="#" id="hide1" > Close < /a > < /div >

This is a great site, I've added it to my favourites. Thanks for your time, Karl.

By: bhomatude

bhomatude — Sun, 27 Jun 2010 06:24:39 +0000

Trying to learn the basics... Here is a script for three toggle buttons that each when clicked open their corresponding divs. Fine. Now how does one go about automatically closing an open div when clicking on a new 'toggler' that opens it's div? I see other posts about this very question, but I'm just not grasping the logic.

jQuery(document).ready(function($) {
        $("#toggle1").click(function () {
            $("#toggle1div").toggle("drop", {direction:"right"}, 500);
        });
        $("#toggle2").click(function () {
            $("#toggle2div").toggle("drop", {direction:"right"}, 500);
        });
        $("#toggle3").click(function () {
            $("#toggle3div").toggle("drop", {direction:"right"}, 500);
        });
    });

I am thinking that I could somehow incorporate this code:

if ($("#toggle2div").is(':visible')) {
    $("#toggle2div").hide();
}

like this:


jQuery(document).ready(function($) {
        $("#toggle1").click(function () {
            $("#toggle1div").toggle("drop", {direction:"right"}, 500);

if ($("#toggle2div").is(':visible')) {
    $("#toggle2div").hide();
};

if ($("#toggle3div").is(':visible')) {
    $("#toggle3div").hide();
}

        });

But that doesn't work... Help?

By: Ashu Pal

Ashu Pal — Tue, 08 Jun 2010 22:13:26 +0000

For Make an element by default hidden when the page loads, the above code should look like this:

 
$(function() { 
              $("#h1").hide();  // by defining it before click function make it by default hidden.
	        $("#ToggleButton").click(function() {                 
	        $("#h1").toggle("slow"); });
             });

By: Karl Swedberg

Karl Swedberg — Fri, 21 May 2010 17:45:45 +0000

Thanks, JR!

I believe that I showed how to do that here:
http://www.learningjquery.com/2006/09/slicker-show-and-hide

If that one doesn’t answer your question, though, let me know.

By: JR

JR — Fri, 21 May 2010 17:36:08 +0000

Karl,
Your posts are very clear and helpful. I’m going through this methodically.

Where is: “How did I attach the hiding and showing to those buttons? I’ll show you that in my next entry.”

Thanks