Question

I have some js (show/hide pretty standard I guess):

<script>
    function showTransactions(transactions){
        $('.steps').hide()
        $('#' + transactions).show();
    }
</script>

and some html:

<p><a href="#"onClick="showTransactions('hidden3');return false;">Edit</a></p>
<div id="hidden3" class="steps" style="display: none;">

Now this works great when I click the link, it shows it. Easy. How can I get the js to refresh to the current step? I have steps hidden1, hidden2, hidden3, and hidden4. The default starting position is hidden1 so on refresh it will display hidden1 instead of hidden3 if that’s where you were on refresh.

Also, I need to direct users to a specific step on some instances via a url link. I tried page_url#hidden4 but that doesn’t work. I need to be able to tell it to display hidden4 in that link instead of the default first step.

Answer 1

Two main things are wrong with your code:

• You do not hook your jQuery code to the “document ready” event. Not doing this will (potentially) cause it to run before the document is fully loaded, which is undesirable most of the time.
• You’re using onclick inline JavaScript. Don’t do that. That’s not the way JavaScript/HTML integration is written anymore. jQuery has event handlers to catch click events for you. Always keep HTML and JavaScript 100% separate.

CSS:

.hidden {
  display: none;
}

HTML

<p><a class="reveal" href="#hidden3">Edit</a></p>
<div id="hidden3" class="hidden step">

JavaScript

// $() is short for $(document).ready()
$(function () {
    // hide all the steps on document load
    $("div.step").addClass("hidden");

    // show the one step that is identified by the current hash (if any)
    $(document.location.hash).removeClass("hidden");

    $("a.reveal").click(function (event) {
        var idToReveal = $(this).attr("href");

        // store the ID to show in the URL for bookmarking
        document.location.hash = idToReveal;

        // hide every step that is currently visible
        $("div.step").not(".hidden").addClass("hidden");

        // reveal the next div (as identified by the current link's href)
        $(idToReveal).removeClass("hidden");

        // prevent the default click behavior (i.e. prevent navigation)
        event.preventDefault();
    });
});

The above makes use of the fact that the document.location.hash, a page-internal <a href> and jQuery’s ID selector all use the same syntax.

As long as you just want to transport a single bit of information in the hash, this is all you need.