jQuery button text changer script

Question

It seems it could be written shorter. It's especially annoying when I have to do this in multiple languages, so the button labels will be different.

<button id="egyes" class="btn btn-danger">Hide</button>&nbsp;some text
<button id="kettes" class="btn btn-warning">Hide</button>&nbsp;other text
<button id="harmas" class="btn btn-info">Hide</button>&nbsp;some more text
<button id="otos" class="btn btn-success">Hide</button>&nbsp;last button
<button id="showall" class="btn">Show all</button>

<script>
            $(document).ready(function() {
                $("#egyes").click( function() {
                    $("div.progress-danger").parent().fadeToggle();
                    if ($(this).html() == "Show") {
                        $(this).html("Hide");
                    } else {
                        $(this).html("Show");
                    }
                });
                $("#kettes").click( function() {
                    $("div.progress-warning").parent().fadeToggle();
                    if ($(this).html() == "Show") {
                        $(this).html("Hide");
                    } else {
                        $(this).html("Show");
                    }
                });
                $("#harmas").click( function() {
                    $("div.progress-info").parent().fadeToggle();
                    if ($(this).html() == "Show") {
                        $(this).html("Hide");
                    } else {
                        $(this).html("Show");
                    }
                });
                $("#otos").click( function() {
                    $("div.progress-success").parent().fadeToggle();
                    if ($(this).html() == "Show") {
                        $(this).html("Hide");
                    } else {
                        $(this).html("Show");
                    }
                });
                $("#showall").click( function() {
                    $("div.container > div > div.progress").parent().fadeIn();
                });
            });
</script>

Answer 1

if you add the parent div class into the data attributes:

<button id="egyes" class="btn btn-danger" data-parentclass="progress-danger">Hide</button>&nbsp;some text 
<button id="kettes" class="btn btn-warning" data-parentclass="progress-warning">Hide</button>&nbsp;other text
<button id="harmas" class="btn btn-info" data-parentclass="progress-info">Hide</button>&nbsp;some more text
<button id="otos" class="btn btn-success" data-parentclass="progress-success">Hide</button>&nbsp;last button
<button id="showall" class="btn">Show all</button>

or add it in via javascript:

$("#egyes").data("parentclass", "progress-danger");
// etc

then the javascript can work it out itself. ​

$(document).ready(function() {
    $("#egyes, #kettes, #harmas, #otos").click( function() {
        var $parent = $("div." $(this).data("parentclass")).parent();

        if ($parent.is(":visible")) {
            $(this).html("Hide");
        } else {
            $(this).html("Show");
        }

        parent.fadeToggle();
    });


    $("#showall").click( function() {
        $("div.container > div > div.progress").parent().fadeIn();
    });
 });

​