2
\$\begingroup\$

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>
\$\endgroup\$
2
\$\begingroup\$

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

\$\endgroup\$
  • \$\begingroup\$ definately looks better ! \$\endgroup\$ – kissgyorgy Aug 14 '12 at 7:38
  • \$\begingroup\$ however parent.is(":visible") will be always true, because when the script reach the if(...) the divs will be already visible ! \$\endgroup\$ – kissgyorgy Aug 14 '12 at 8:05
  • \$\begingroup\$ @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?) \$\endgroup\$ – James Khoury Aug 14 '12 at 9:30
  • 1
    \$\begingroup\$ I tested it and worked after the modification. \$\endgroup\$ – kissgyorgy Aug 14 '12 at 9:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.