Hi everybody,
I'm trying to make work a functionality that exists on my website but works bad on Safari for iPhone.
Well, I have a "li" element:
..
<li><input id='showOrHide' type='button' value='show or hide'/></li>
<li><input type='text' value='ok'/></li>
..
When I click on the 'show or hide' button, the text input should appear or disappear.
Then, I have a jQuery function that binds the click:
$("#showOrHide").click(function(){
if($(this).parent().next().is(':visible'))
$(this).parent().next().hide('slow');
else
$(this).parent().next().show('slow');
});
The problem is that, if the element appears, Safari hides it then shows it.
So I think that Safari checks wether the element is visible or not. If it's visible, it hides it, then go to the "else" selection. There, it checks if the element is visible or not. It will find the it's not visible, then will make it appear.
So someone on stackoverflow adivises me to use the toggle function and that is what I did:
$("#showOrHide").click(function(){
$(this).parent().next().toggle('slow');
});
I tried your function: It works perfectly on desktop browsers (chrome, safari) but on Safari for iPhone it did what I described: Shows and hides the hidden element instantly.
Is there a solution for that without using an extrernal javascript framework (but jQuery) ?
Thanks, Regards