Hello everyone...
I have this div that is supposed to be hidden when the page loads and it would appear when clicking on a certain button. Although in the CSS class I added display:none to the class and in the JQuery I added ("$('.panel').hide()") the panel still appears when the page is loading, once the page loads it disappears ... Any suggestions on how to keep it hidden all the time untill the show button is clicked?
Thanks.
Try removing the jquery.hide() and if it still shows then you have an issue with the css. We can assume the jquery is working because its hiding it after the page finishes loading which is when the jquery will be executed for you.
Perhaps paste some code and we can get to the bottom of this...
Are you sure it's not
visibility:hidden;
you are looking for?
EDIT: Forgot to mention to remove the Javascript first so you can pinpoint the problem.
In the HTML itself, put a hardcoded style="visibility:hidden". Although it is redundant, the browser will process this before the javascript fires.
Make sure the element doesn't have inline-styling, for example:
<div style="display: block;">
This will override your stylesheet CSS and would show until jQuery did a .hide(), which seems to be the symptoms you're experiencing.