CODEWITHSUNDEEP
javascriptjqueryhtml
Kanmaniselvan
Kanmaniselvan

Reputation: 542

Displaying Content Onclick without reloading/refreshing the page

I'm using JavaScript and button to display a portion onclick and hide on re-clicking that portion.

JavaScript code:

<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>

and the code for button is:

<input type="button" onclick="return toggleMe('para2')" value="Technical Quiz" id="button">

and the content is:

<div id="para3" style="display:none; color:#FFF;">
Rules are Coming UP...
</div>

The main problem is when viewed in opera mini and uc browser, onclicking that button it reloads the page and displays the content. I don't want to reload the page. I just want to display the content without reloading the page.

Upvotes: 0

Views: 3003

Answers (2)

gee
gee

Reputation: 72

I am pretty sure that the reload page is caused by the form submit. Are you sure the input is not wrapped by a element?

you can try add e.preventDefault() in the toggleMe function which would block the default operation of the input button.

Upvotes: 0

Kevin B
Kevin B

Reputation: 95048

return true doesn't prevent the default action. the default action reloads the page. Therefore, you should return false to prevent the page reload.

return false;

Additional note. The page reload is likely due to a form being incorrectly submitted by said button.

Upvotes: 3

Related Questions