jQuery button text changer script 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.

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

&lt;script&gt;
            $(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 &gt; div &gt; div.progress").parent().fadeIn();
                });
            });
&lt;/script&gt;
if you add the parent div class into the data attributes:

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


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 &gt; div &gt; div.progress").parent().fadeIn();
    });
 });


​