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();
 });
 });

​

• kissgyorgy: definately looks better !
• kissgyorgy: however parent.is(":visible") will be always true, because when the script reach the if(...) the divs will be already visible !
• James Khoury: @Walkman whoops! ... wasn't able to test it. Just move the .fadeToggle after it? ... I can't actually test it without some more markup. (or maybe a jsfiddle.net?)
• kissgyorgy: I tested it and worked after the modification.