Toggle show/hide content using javascript

Question

I would like to have a hypertext "I want to create a custom package" on my webpage. Clicking "I want to create a custom package" should result in hiding the hypertext and displaying a desired DIV which in my case have id="hide2".

What i have right now is:

1:Corresponding javascript

<script type="text/javascript">
function load1()
{
    document.getElementById('hide2').style.display='none';
    return false;
}
function toggle()
{
    document.getElementById('hide1').style.display='none';
    document.getElementById('hide2').style.display='';

}
</script>

2. Corresponding HTML code:

<body onLoad="load1()">
<a onclick="toggle()" href="" id="hide1">I want to create a custom package</a>
    <div id="hide2">
    <p><input type="radio" name="">Name your price:
    <input type="text" width="10px">.00($299 minimum)<br>
    </p> 
</div>
</body>

This code is working almost ok,clicking on the hypertext hides the link and displays "hide2" div. Apart from the fact that it goes back to its body.onLoad mode(i.e hypertext shown and div hidden) just after few milliseconds the div "hide2" comes into existence.
Please be generous in suggesting where i made mistake also apart from providing solution. Thanks in advance.

possible duplicate of [javascript hide/show element](http://stackoverflow.com/questions/6242976/javascript-hide-show-element) — oleq, Aug 01 '13 at 20:02
Instead of using `load1` you could just add `style="display:none"` to the `hide2` element. No reason to use extra javascript on load if you can just apply it directly with CSS — Kevin Jantzer, Aug 01 '13 at 20:03
Thanks @KevinJantzer for your suggestion. yes tha could be one way of doing it. — Amit Singh, Aug 01 '13 at 20:17
@oleq: sure duplicate of http://stackoverflow.com/questions/6242976/javascript-hide-show-element :-| — Amit Singh, Aug 01 '13 at 22:19

score 3 · Answer 1 · answered Aug 01 '13 at 19:59

3

The problem is that your link has href="" in it - this will cause the browser to reload the page when it is clicked. Change your onclick to toggle(); event.preventDefault(); and it should prevent the reload. You should also probably change the link to have href="#", which will just cause the browser to jump to the top of the page if it's triggered by mistake, rather than reloading.

answered Aug 01 '13 at 19:59

Jules

14,841
9
83
130

Alternatively; his \`\``toggle()`'' function could return a value of `false` – Indy Aug 01 '13 at 20:00
1

You could also just remove the `href` attribute altogether. Or remove the onclick and do this: `href="javascript:toggle(); return false"` – Kevin Jantzer Aug 01 '13 at 20:00

score 1 · Answer 2 · answered Aug 01 '13 at 20:19

Jules pointed out the main problem in your code, but the code wasn't very pretty otherwise either, so I took the liberty of refactoring your code: http://jsfiddle.net/CgQgD/2/ :)

Basically you want to have hidden defined as a class instead of manipulating CSS values directly from JS, that way you can easily remove, add and check for the hidden class.

.hidden { display: none; }

It also means you can easily have an element hidden initially without using inline CSS, which makes your onload handler useless (you would normally also use window.addEventListener('load', ...); instead, if you really have to use the onload event).

score 0 · Accepted Answer · answered Aug 01 '13 at 20:01

You might want to switch the script from the body tag, and consider using jQuery, and this for the initial hide:

$(document).ready(function (
{
//Script here
});

Otherwise, the reason behind the problem you're seeing is that you aren't canceling the page postback. Consider using this as your href:

href="javascript:void(0);"

Toggle show/hide content using javascript

3 Answers3