Showing and hiding text in response to a button click

The code below does this. When I click the button for the first time, it shows the respective text. And when I click the same button again, it fades out and fades in. However, I want the respective text to disappear if the button is clicked the second time instead of fading out and then fading in.

$(document).ready(function(){
    $('.info').click(function(){
        $(this).next().fadeOut("slow");
    $(this).next().fadeIn("slow");
    });
});

HTML:

    <div>
        <a class="info" p style="font-size:30px" href="javascript:void(0);">header 1</a>
        <h1 class="infoText" style="display:none">text 1</h1>
    </div>
    <div>
        <a class="info" href="javascript:void(0);">header 2</a>
        <h1 class="infoText" style="display:none">text 2</h1>
    </div>
    <div>
        <a class="info" href="javascript:void(0);">header 3</a>
        <h1 class="infoText" style="display:none">text 3</h1>
    </div>

It should start like this:

header1

header2

header3

When I click header1, it should be like this:

header1

text1

header2

header3

And when I click header 1 again, it should be like this:

header1

header2

header3

Anybody know how to do this?