Javascript function doesn't run properly and displays a box for only 1 second

Question

I have got a problem with my javascript function. It is supposed to display a box for a user whenever he clicks on the "szukaj" button. It runs, but only for roughly 1 second.

HTML code

<p id = "paragraph">                                 <!--search box-->
    <input type = "text" name = "serachBar"/>
    <input type = "button" value = "szukaj" name = "search"/>
</p>
<div id = "searchImage">                             <!--search button style-->
    <a href = "" onclick = "popUp('paragraph')" >
        <img src = "images/searchButton.jpg"/>
    </a>
</div>

CSS

#searchImage {
    position:fixed;
    display:block;
    border-radius:6px 0px 0px 6px;
    right:0;
    top:122px;
    height:80px;
    width:25px;
}
#searchImage img{
    border-radius:6px 0px 0px 6px;
    border:1px solid rgba(255,255,255,.3)
}
#searchImage img:hover{
    border:1px solid rgba(255,255,255,.9)
}
#paragraph{
    position:absolute;
    border-bottom:1px solid rgba(255,255,255,0.3);
    border-radius:2px;
    box-shadow:0 1px 2px 2px #1F0000;
    -moz-box-shadow:0 1px 2px 2px #1F0000;
    -webkit-box-shadow:0 1px 2px 2px #1F0000;
    border-top:none;
    background:rgba(0,0,0,0.2);
    width:160px;
    height:80px;
    top:122px;
    right:0;
    display:none;
    font-size:15px;
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    color:white;
}

javascript itself

function popUp(menu){
    var box = document.getElementById(menu);

    if(!box || box.style.display == "block"){
        box.style.display = "none";
    }
    else {
        box.style.display = "block";        
    }       
}

Answer 1

Try this in HTML

<p id = "paragraph">                                 <!--search box-->
  <input type = "text" name = "serachBar"/>
  <input type = "button" value = "szukaj" name = "search"/>
</p>
<div id = "searchImage">                             <!--search button style-->
 <a href = "#" onclick = "popUp('paragraph')" >
  <img src = "images/searchButton.jpg"/>
 </a>
</div>

Demo

Answer 2

The href in an <a> tag is evolving, and in fact in html5, is not required.

You are better off changing your <a> tag to a <div> and/or writing cleaner and more appropriate javascript:

<p id = "paragraph"> <!--search box-->
    <input type = "text" name = "serachBar"/>
    <input type = "button" value = "szukaj" name = "search"/>
</p>
<div id = "searchImage"> <!--search button style-->
    <div onclick = "popUp('paragraph')" >
        <img src = "images/searchButton.jpg"/>
    </div>
</div>

function popUp(menu){
    event.preventDefault(); // if using an <a> tag
    var box = document.getElementById(menu);
    if (box) {
        if (box.style.display === "block") {
            box.style.display = "none";
        }
        else {
            box.style.display = "block";        
        }       
    }
}

Here is a better Fiddle

And if you still want to use the <a> tag Fiddle