Hiding and showing a div using jQuery

Question

I have a div that is supposed to hide itself when clicked on. Then if you click on it again, it will show itself. Then if you click on it again, it will hide itself again, and so on and so forth.

When it's clicked on the first time, it checks to see if the variable $visible is true or not. If $visible is true, it'll hide it, and then set $visible to null. Else if $visible is not true, it'll show it, and then set $visible to true. But for some reason it'll not doing that at all.

I'm sure I did something wrong, so please take a look at my code:

<div id="id">Hello</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
  //*************************************************************
  function hideOnClick($id) {
    $("#" + $id).click(function() {
      $(this).hide();
    });
  }

  function showOnClick($id) {
    $("#" + $id).click(function() {
      $(this).show();
    });
  }

  //*************************************************************

  $(document).ready(function() {
    $id = "id";
    $visible = "true";

    $("#" + $id).click(function() {
      if ($visible == "true") {
        hideOnClick($id);
        $visible = null;
      } else {
        showOnClick($id);
        $visible = "true";
      }
    }); //end of $("#"+$id).click(function()      
  }); //end of $(document).ready(function()

  //*************************************************************
</script>

Results:

First click on div #id: Nothing happens.
Second click on div #id: #id hides itself
Third click on div #id: Nothing happens. Doesn't show itself again.
Fourth click on div #id: Nothing happens. Doesn't show itself again.
Fifth click on div #id: Nothing happens. Doesn't show itself again.
And this continues on indefinitely...

because it is hidden already you cant click it anymore. put a button where you can hide and show the div — guradio, Oct 02 '15 at 02:00
@Pekka I want to punch myself right now. All this time, I thought I wrote the code wrong somewhere. — jessica, Oct 02 '15 at 02:01

score 2 · Accepted Answer · answered Oct 02 '15 at 02:02

2

Firstly, let me say that jQuery already has a feature for that, named .toggle.

Secondly, if you're hiding a div, it isn't anymore inside your page, so you won't be able to click it.

So, if you wanna do that, you'll need to use the CSS opacity: 0, or visibility: hidden. E.g:

$(this).css('visibility', 'hidden');  // to hide
$(this).css('visibility', 'visible'); // to show

answered Oct 02 '15 at 02:02

Buzinas

11,597
2
36
58

So basically if you're hiding it using jQuery it will no longer be on the page, but if you're hiding it using css it WILL still be on the page, just invisible? Dammit! I didn't know that. I also didn't know about the toggle function in jQuery. Could've saved me a lot of trouble then writing my own toggle function from scratch, lol. – jessica Oct 02 '15 at 02:04
1

The jQuery's `hide` / `show` / `toggle` also do that with CSS, but they use the property `display: none`, and that one doesn't display your `div` at all. But when you use `visibility`, the div is still there, but it's *transparent*. – Buzinas Oct 02 '15 at 02:07
Ah. That makes sense. It would've been nice if they add a third parameter to hide/show/toggle to set display to none, or to make visibility transparent. Oh, well. – jessica Oct 02 '15 at 02:16
Btw, does css only take in 2 parameters? Or is it infinite? – jessica Oct 02 '15 at 02:17
@jessica If my answer was useful for you, please upvote it by clicking on the arrow, and mark it as the accepted by clicking on the `V` right below the upvote / downvote arrows :) – Buzinas Oct 02 '15 at 02:17
The jQuery API is your friend, anything you're trying to do, you can find there. You can pass more parameters, by using a key/value object. Something like: `$(this).css({ visibility: 'hidden', display: 'none', opacity: '0' });`. – Buzinas Oct 02 '15 at 02:19
If you use a key/value object, you don't HAVE to use more than 1 parameters, right? So, something like { visibility: 'hidden' } by itself would also be fine? Just wondering. – jessica Oct 02 '15 at 02:21
@jessica Yeah, it would be fine, although not recommended, since jQuery will have one more step to parse that, and your code will be bigger. – Buzinas Oct 02 '15 at 02:23
1

Ah okay. Got it. Use 2 parameter if you only have to set one css style, to save space. And use the key/value object if you need to change 2 or more css styles. – jessica Oct 02 '15 at 02:25
Oh. One last question. I promise. Is there a function like toggleClass, but instead of toggleClass, it's something like toggleCss, where any css codes on the inside of it gets toggled? – jessica Oct 02 '15 at 02:34
@jessica No, there isn't, since most of the CSS properties can have more than two available values. E.g: `width`, `height`, `opacity`, `overflow` etc. – Buzinas Oct 02 '15 at 02:36
Wouldn't something like this work? $('#user_button').toggle(function () { $("#user_button").css({borderBottomLeftRadius: "0px"}); }, function () { $("#user_button").css({borderBottomLeftRadius: "5px"}); }); – jessica Oct 02 '15 at 02:38
@jessica I don't think so.. You should test :) – Buzinas Oct 02 '15 at 02:39
I don't get it. I got that answer from here: http://stackoverflow.com/questions/3337621/jquery-toggle-css and the person I got it from got 68 upvotes, and his answer is accepted. >.< What's going on? – jessica Oct 02 '15 at 02:45
But that's the thing. It doesn't. Oh, well, I'll just ask a new question. – jessica Oct 02 '15 at 02:56

score 1 · Answer 2 · answered Oct 02 '15 at 02:03

1

You can use jQuery's toggle class:

 $("#myID").click(function(){
        $("#myID").toggleClass("visible");
    });

Assuming you have a class called visible:

.visible{
  visibility: hidden;
}

answered Oct 02 '15 at 02:03

user2707389

817
6
12

You seem to be forgetting the part where you shows the div again if you click on it again. – jessica Oct 02 '15 at 02:14
hmm, i assumed toggleClass will automatically do that for you. if there is a class 'visible' and it's not showing, it will remove the class visible upon click and make it visible? – user2707389 Oct 02 '15 at 02:25
Ah. So that's what toggleClass does? If toggles the styles of the class. I shoud've guessed. My bad. >.> – jessica Oct 02 '15 at 02:27
Oh. Btw, shouldn't it be toggleClass(".visible"); with the period before 'visible'? Since it's a class? Oh, nevermind. Since the function is called toggleClass, of course whatever is in it is a class name... – jessica Oct 02 '15 at 02:28
Oh. One last question. I promise. Is there a function like toggleClass, but instead of toggleClass, it's something like toggleCss, where any css codes on the inside of it gets toggled? – jessica Oct 02 '15 at 02:34
http://stackoverflow.com/questions/3337621/jquery-toggle-css . In short, jQuery has a toggle class which sets state = !state. – user2707389 Oct 02 '15 at 03:41

Vance · Answer 3 · 2015-10-02T02:08:30.210

1

You can also do that without creating a button:

    $(":not(#div)").click(function(){$('#div').show();});

instead of:

    $("#div").click(function(){$('#div').show();});

hide part:

     $("#div").click(function(){$(this).hide();});

edited Oct 02 '15 at 02:08

answered Oct 02 '15 at 02:04

Vance

897
5
9

Does 'not' always have to be accompany by a semicolon? – jessica Oct 02 '15 at 02:10
So your code is saying when you're not clicking on the div with id of #div, shows the #div, but when you ARE clicking on the div with id of #div, hides the #div? Nicely done. – jessica Oct 02 '15 at 02:12
Why are you including the semicolon then, if it's not necessary? – jessica Oct 02 '15 at 02:12
You mean the "colon"? you need the colon of course for it to work :). I just got confused because your'e asking about a "semi colon" @jessica – Vance Oct 02 '15 at 02:15
My bad ;P. I thought I was talking about the colon. I'll up vote yours. – jessica Oct 02 '15 at 02:19

Hiding and showing a div using jQuery

3 Answers3