dynamically changing text in div

Question

Can someone please take a moment to look over this and let me know where I am going wrong in my code?

For some reason, the content div won't change when the buttons are clicked.
It's very simple, and right now I feel very confused for not being able to find my error.

CSS:

#wrapper {
margin: 0 auto;
    width:100%;
    max-height: 133px;
font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    line-height:1.5em;
}


#buttons {
width:340px;
    float: left;
    height: 133px;
    margin: 10px 10px 0 0px;
    border-right: 1px solid #666;
}

#button1 a {
outline: none;
text-indent: -5000px;
display:block;
width:146px;
height:105px;
background-image:url(images/sprite_v2.png);
background-position: -292px 0px;
background-repeat:no-repeat;
float:left;
margin-right:20px;
}

#button1 a:hover {
background-position: -292 -105px;
}

#button1 a:active {
background-position: -292 -210px;
}

#button2 a {
outline: none;
text-indent: -5000px;
display:block;
width:146px;
height:105px;
background-image:url(images/sprite_v2.png);
background-repeat:no-repeat;
background-position: -438px 0;
float:left;
}

#button2 a:hover {
background-position: -438px -105px;
}

#button2 a:active {
background-position: -438px -210px;
}

#content {
font-family: Arial, Helvetica, sans-serif;
    float: left;
    display:block;
}

a {
text-decoration:none;
}

ul {
overflow:hidden;
    margin: 10px 0 0 8px;
    padding:0;
}

li{
    line-height:1.5em;
    display:inline;
}

#content1 {
color:#953735;
}

#content2 {
color:#604a7b;
}

JavaScript:

$('button').bind('click', function() {
    $('div#content').html($('div#content' + ($(this).index()+1)).html());
});    

HTML:

<div id="wrapper">
<div id="button">
    <div id="button1">
        <a href="#" name="content1"></a>
    </div>
    <div id="button2">
        <a href="#" name="content2">Reporting Administrator</a>
    </div>
</div>
    <div id="content">
        <div id="content1">
            <ul>
                <li><a href="#">Stuff1</a></li><br />
                <li><a href="#">Stuff1</a></li><br />
                <li><a href="#">Stuff1</a></li>
            </ul> 
        </div>
        <div id="content2" style="display:none;"> 
            <ul>
                <li><a href="#">Stuff2</a></li><br />
                <li><a href="#">Stuff2</a></li><br />
                <li><a href="#">Stuff2</a></li>
             </ul> 
        </div>   
  </div>

</body>
</html>

Answer 1

David Müller had it correct regarding the button selector being an issue.

The switching wasn't occurring with the event on the link because the index of the links will be 0 since both are only children. If the event is instead on the parent div, the switching works. Below is a jsfiddle and the code.

http://jsfiddle.net/VrKsh/2/

<div id="wrapper">
<div id="button">
    <div id="button1">
        <a href="#" name="content1">Content1</a>
    </div>
    <div id="button2">
        <a href="#" name="content2">Content2</a>
    </div>
</div>
<div id="content">
    <div id="content1">
        <ul>
            <li><a href="#">Stuff1</a></li><br />
            <li><a href="#">Stuff1</a></li><br />
            <li><a href="#">Stuff1</a></li>
        </ul>
    </div>
    <div id="content2" style="display:none;">
        <ul>
            <li><a href="#">Stuff2</a></li><br />
            <li><a href="#">Stuff2</a></li><br />
            <li><a href="#">Stuff2</a></li>
         </ul>
    </div>   
</div>

<script type="text/javascript">
    $('#button div').bind('click', function() {
        $('div#content div:visible').hide();
        $('div#content' + ($(this).index() + 1)).show();
    });
</script>

Answer 2

The selector $('button') is the problem. You don't want to select a button - element but an element within the div #button, am I right?

So you should take $("#button a") as selector, if you want to append the event handler to all links within the #button element.