Jquery Toggle - Hide by Default

[almo136]

Hi,

I have this jquery code which toggles a div between hide and show. Currently the div is displayed when the page is loaded but I would like to edit it so that the div is hidden by default.

<script type="text/javascript">

$(function() {
//run the effect
function runEffect(){
//effect type
var selectedEffect = 'blind';

//most effect types need no options passed by default
var options = {direction: 'vertical'};
//check if it's scale, transfer, or size - they need options explicitly set
if(selectedEffect == 'scale'){ options = {percent: 0}; }
else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; }

//run the selected effect
$("#effect").toggle(selectedEffect,options,500);
};

$("#button").click(function() {
runEffect();
return false;
});

});
</script>

[eelixduppy]

When the page loads you should hide it then. Something like this maybe...

$(document).ready(function(){ 
  $(document).ready(function () { 
    $("#effect").toggle(false); 
  }); 
 }); 

[almo136]

Thanks. Found the code I needed:

<script type="text/javascript">
$(document).ready(function(){
var selectedEffect = 'blind';
var options = {direction: 'vertical'};
$('#effect').hide(); // Hide div by default
$('a#button').click(function() {
$('#effect').toggle(selectedEffect,options,650); // First click should toggle to 'show'
return false;
});
});
</script>