0

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...
Improve this question
4
  • 1
    because it is hidden already you cant click it anymore. put a button where you can hide and show the div Commented Oct 2, 2015 at 2:00
  • like this jsfiddle.net/4nzcxzvm Commented Oct 2, 2015 at 2:01
  • @Pekka I want to punch myself right now. All this time, I thought I wrote the code wrong somewhere. Commented Oct 2, 2015 at 2:01
  • please check the fiddle if its ok i will put it as answer Commented Oct 2, 2015 at 2:02

3 Answers 3

Reset to default
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
Improve this answer
Sign up to request clarification or add additional context in comments.

15 Comments

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.
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.
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.
Btw, does css only take in 2 parameters? Or is it infinite?
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.
|
1

You can use jQuery's toggle class:

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

Assuming you have a class called visible:

.visible{ visibility: hidden; }
Improve this answer

6 Comments

You seem to be forgetting the part where you shows the div again if you click on it again.
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?
Ah. So that's what toggleClass does? If toggles the styles of the class. I shoud've guessed. My bad. >.>
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...
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?
|
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();});
Improve this answer

5 Comments

Does 'not' always have to be accompany by a semicolon?
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.
Why are you including the semicolon then, if it's not necessary?
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
My bad ;P. I thought I was talking about the colon. I'll up vote yours.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.