Hello I would like to know how to make toggle hidden when the page loads, I have made a simple code, but when the page loads it will be shown by default. I want it the way around.
I have to tried to use CSS something like
.hidden {
display:none;
}
when I use this code, the element doesn't show at all.
this is my code
EDITED
<script type="text/javascript">
function toggleDiv(divId) {
$("#"+divId).toggle();
}
</script>
<a href="javascript:toggleDiv('myContent');">this is a test</a>
<div id="myContent">
<a href="javascript:toggleDiv('myContentt');"><span>this is a text</span></a>
<div>this is a test #2 </div>
</div>
<div id="myContentt">
test
</div>
please help.
I guess, you want something like this,
Demo ( I used onclick
in demo because jsfiddle doesnt like javascript on href
)
CSS:
.hidden{
display:none;
}
Markup:
<a href="javascript:toggleDiv('myContent');">this is a test</a>
<div id="myContent" class='hidden'>
<div>this is a test #1 </div>
</div>
<br />
<a href="javascript:toggleDiv('myContentt');"><span>this is a text</span></a>
<div id="myContentt" class='hidden'>
this is a test #2
</div>
Javascript:
function toggleDiv(divId) {
$("#"+divId).toggle();
}
Just add the
$("your class").hide();
Example
$(document).ready(function(){
$(".subResult").hide();
});
then you can define your function
function toggle(){
$(".subResult").slideToggle(2000);
}
Another Example
$(document).ready(function(){
$("p").hide();
$("button").click(function(){
$("p").toggle();
});
});
///////
$("p").hide();
This line hides your div on ready function.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With