Furkan Ayık Furkan Ayık - 1 year ago 79
HTML Question

Show/Hide button works but just for sec. (javascript-css-html)

I have a button that hides/shows a

. In CSS I wrote
for this
because I don't want it shown when the page is first loaded. My button works with JavaScript func, and this func including
and changing the div's display.

The problem is that when I use the button my div is showing for 1 second and it disappears again.

I think it is about my CSS style but JavaScript must have changed the display. So I don't know :( Here is my code (I'm not adding my CSS because it just has
about that div)

<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block')
e.style.display = 'none';
e.style.display = 'block';

And here is the HTML

<div class="butondiv">
<button id="btnshow" class="btn" onclick="toggle_visibility('panelid')" runat="server"> Departments </button>
<div id="panelid" class="panel" style="display:none;">
<ul class="list-group">
<li class="list-group-item"><a>Dep1 </a> <button runat="server" href="#">Delete</button></li>
<li class="list-group-item"><a>Dep2 </a> <button runat="server" href="#">Delete</button></li>
<li class="list-group-item"><a>Dep3 </a> <button runat="server" href="#">Delete</button></li>

Answer Source

You should prevent the form submission by explicit adding the type of the button or by js.

<div class="butondiv">
    <button type="button" id="btnshow" class="btn" onclick="toggle_visibility('panelid')" runat="server"> Departments </button>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download