Making div invisible and visible using toggle in jQuery

Question

I have a div where when you click it, it's suppose to turn invisible, and when you click on it again, it's suppose to turn visible. But something's wrong with my code. Please take a look:

<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 toggleOnClick($id){

$("#"+$id).click(function() {   
$("#"+$id).toggle(

function () {
$(this).css({visibility: "hidden"});
}, 
function () {
$(this).css({visibility: "visible"});

}); //end of $("#"+$id).toggle

}); //end of $("#"+$id).click(function()    

} //end of function toggleOnclick($id)

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

$(document).ready(function(){

toggleOnClick("id");

});         

</script>

P.S: Got my source from the accepted answer in this link: jQuery toggle CSS?

Pranav C Balan · Accepted Answer · 2015-10-02T03:27:13.807

3

tggle() will toggle between display property so it will not retain place for element after it hides, You need to use css() with callback and update its opacity, it will retain it's place.

Update : The click event will not fire on element with visibility: hidden so you need to use opacity:0

Callback in css() is a function returning the value to set. this is the current element. Receives the index position of the element in the set and the old value as arguments. ( Taken from http://api.jquery.com/css/#css-propertyName-function )

<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 toggleOnClick($id) {

      $("#" + $id).click(function() {
        $("#" + $id).css('opacity', function(i, v) {
          return v == 0 ? 1 : 0; //end of $("#"+$id).toggle
        });
      }); //end of $("#"+$id).click(function()    

    } //end of function toggleOnclick($id)

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

  $(document).ready(function() {

    toggleOnClick("id");

  });
</script>

edited Oct 02 '15 at 03:27

answered Oct 02 '15 at 03:08

Pranav C Balan

113,687
23
165
188

Can you explain the callback? And what's inside it? – jessica Oct 02 '15 at 03:10
Also the callback function have 2 parameters. 'i' and 'v', but I don't see the 'i' anywhere. What does it do? – jessica Oct 02 '15 at 03:12
@jessica : i is index and v is old value – Pranav C Balan Oct 02 '15 at 03:14
@jessica : we don't need i , but we want v – Pranav C Balan Oct 02 '15 at 03:15
Why is i included in the parameter if we don't need it? o.O – jessica Oct 02 '15 at 03:16
...And I understand that. So I'm asking you why you're including the first parameter 'i', if we only need the second parameter 'v'. – jessica Oct 02 '15 at 03:18
So you're saying the first parameter 'i' is needed, but we're just never going to use it. It's only going to be used as an index for something? Okay. – jessica Oct 02 '15 at 03:19
Also. I've just read the api.query's definition for the callback function and it's confusing me a bit. Can you describe it in layman's terms? And also, can you describe in details what this part of the code does? return v == 0 ? 1 : 0; – jessica Oct 02 '15 at 03:22
it's shorthandler for if else statement... if v(old value) equals 0 then it returns 1 else it will return 0 – Pranav C Balan Oct 02 '15 at 03:23
I see. That's all I need for now. I'll accept your answer now. – jessica Oct 02 '15 at 03:27

Making div invisible and visible using toggle in jQuery

1 Answers1