Question

I’m building a little “walkthrough” type guide with tooltips using jquery.

When the page loads, a section of the page will have a tool tip saying “step 1” next to it and when they click on the required area, that disapears and “step 2” will appear further down the page.

My code works but I’m just looking for advice on how to improve and optimise what I’ve written or perhaps a way of simplifying the entire process. I’ve already tried using variables in places like the $(‘.helpTip’) selector but I believe i’ll have to then define that var within each click function which is a bit pointless right?

Anyway, the code:

$('.box1').append('<div class="helpTip">Step 1. <span>text</span></div>');

$('.box1 li').click(function() {
    $('.helpTip').fadeOut().remove();
    $('.box2').append('<div class="helpTip">Step 2. <span>text</span></div>');
});

$('.box2 p').click(function() {
    $('.helpTip').fadeOut().remove();
    $('.box3').append('<div class="helpTip">Step 3. <span>text</span></div>');
});

$('.box3 div').click(function() {
    $('.helpTip').fadeOut().remove();
    $('.box4').append('<div class="helpTip">Step 4. <span>text</span></div>');
});

$('.box4 div').click(function() {
    $('.helpTip').fadeOut().remove();
    $('.box5').append('<div class="helpTip">Step 5. <span>text</span></div>');
});

$('.box5').click(function() {
    $('.helpTip').fadeOut().remove();
    // Do something to the submit button?
});

HTML if it helps:

<!-- Step 1 -->
<div class="formWrap">  
    <div class="formInner">
        <div class="formHeader">
            <h3>1. </h3>
        </div>
        <div class="box1">

        </div>
    </div>                      
</div>

<!-- Step 2 -->
<div class="formWrap">
    <div class="formInner">
        <div class="box2">

        </div>
    </div>
</div>                  

<!-- Step 3 -->
<div class="formWrap">
    <div class="formInner">
        <h3 class="formHeader">3. </h3>
        <div class="box3">

        </div>
    </div>
</div>  

<!-- Step 4 -->
<div class="formWrap">
    <div class="formInner">
        <h3 class="formHeader">4. </h3>
        <div class="box4">


        </div>
    </div>
</div>

<!-- Step 5 -->
<div class="formWrap">
    <div class="formInner">
        <h3 class="formHeader">5. </h3>
        <div class="box5">

        </div>
    </div>
</div>  

Answer 1

Here are my recommendations, FWIW:

• If there are no other elements with a class of “box1”, I would change
  that to an ID. Then you could target the elements using just
  $('#box1') and it would be a lot faster.
• You can use the delegate() method to target elements under your “box” elements. This is
  generally more efficient. So you’d end up with $('#box1').delegate('li', 'click', function () {});
• Use context to make your queries more efficient. For instance $('.helpTip') will search the entire DOM looking for any element with a class of “helpTip”. It appears what you’re looking to do is target only the “helpTip” inside the current box.
• Cache as many of the queries as you can.

Basically the code gets more like:

var $box1 = $('#box1'),
    $box2 = $('#box2'),
    $box3 = $('#box3'),
    $box4 = $('#box4'),
    $box5 = $('#box5');
$box1.delegate('li', 'click', function () {
    var $this  = $(this);
    $('.helpTip', $this).fadeOut().remove();
    $box2.append('<div class="helpTip">Step 2. <span>text</span></div>');
});

Et cetera…