Archive for jQuery


jQuery for the win

I needed to toggle some text between “show help” and “hide help”.

First, I wrote this and thought I was good:

<style type="text/css">
span.hide { display:none }
</style>
<script type="text/javascript">
$(document).ready(function () {
    $("a.showhide").click(function (event) {
        $("span.show").toggle();
        $("span.hide").toggle();
        return false;
    })
});
</script>
<a class="showhide"><span class="show">Show Help</span><span class="hide">Hide Help</span></a>

That flips the text from “Show Help” to “Hide Help”. But the code can be made even shorter by calling toggle on both spans at once:

<script type="text/javascript">
$(document).ready(function () {
    $("a.showhide").click(function (event) {
        $("a.showhide span").toggle();
        return false;
    })
});
</script>

I heart jQuery.

Comments (4)