Cannot remove a class hidden by JavaScript

Question

I would like hide a div when it is loaded and show it when a button is clicked, but what I get is that the div only shows for a short while and hides again. Am I doing it correctly with the CSS class or is there anything special about display:none;?

HTML

---

<div id="message">
    <div class="item-user hid">
        <a href="">something</a> 
    </div>

    <a class="btn-user" href="">button</a>
</div>

CSS

---

.hid {
    display: none; 
}

JS

---

<script>
    //jquery is loaded already

    $(document).ready(function(){

        $('#message .btn-user').click(function(){
            $('#message .item-user').removeClass('hid');
        });

    });
</script>

Answer 1

You need to use e.preventDefault() to prevent the default action of your anchor:

$('#message .btn-user').click(function(e){
    e.preventDefault();
    $('#message .item-user').removeClass('hid');
});

Fiddle Demo

Answer 2

use this http://jsfiddle.net/3Cp75/

for

<div id="message">
    <div class="item-user hid">
        <a href="">something</a> 
    </div>

    <a class="btn-user" href="">button</a>
</div>

why we are using preventdefault:

  **Prevent a submit button from submitting a form**

otherwise if you dnt want it remove href

link http://jsfiddle.net/3Cp75/1/