I create a simple feature tour sort of like what rdio and Facebook are doing. How can I make it better?$(function () {    $('a.close, a.closebtn').click(function () {        $(.tour-block).hide();    });    $('a.tour-step-01').click(function () {        $(.tour-block).hide();        $(.tour-block.tr01).fadeIn();    });    $('#tourblock-01, a.tour-step-02').click(function () {        $(.tour-block).hide();        $(.tour-block.tr02).fadeIn();    });    $('#tourblock-02, a.tour-step-03').click(function () {        $(.tour-block).hide();        $(.tour-block.tr03).fadeIn();    });    $('#tourblock-03, a.tour-step-04').click(function () {        $(.tour-block).hide();        $(.tour-block.tr04).fadeIn();    });       });HTML:<div class=tour-block tr01><div class=modal-header><a href=# class=close data-dismiss=modal></a><h3>Title Lorem Ipsum</h3></div><div class=modal-body><p>Content Lorem ipsum Content</p></div>    <div class=modal-footer>    <span class=tour-nmbrs><a href=# class=tour-step-01>1</a> <a href=# class=tour-step-02>2</a> <a href=# class=tour-step-03>3</a> <a href=# class=tour-step-04>4</a> <a href=# class=tour-step-05>5</a></span>    <a href=# id=tourblock-01 class=btn btn-primary active>Next</a>    </div></div><div class=tour-block tr02><div class=modal-header><a href=# class=close data-dismiss=modal></a><h3>Title Lorem Ipsum</h3></div><div class=modal-body><p>Content Lorem ipsum Content</p></div>    <div class=modal-footer>    <span class=tour-nmbrs><a href=# class=tour-step-01>1</a> <a href=# class=tour-step-02>2</a> <a href=# class=tour-step-03>3</a> <a href=# class=tour-step-04>4</a> <a href=# class=tour-step-05>5</a></span>    <a href=# id=tourblock-02 class=btn btn-primary active>Next</a>    </div></div><div class=tour-block tr03><div class=modal-header><a href=# class=close data-dismiss=modal></a><h3>Title Lorem Ipsum</h3></div><div class=modal-body><p>Content Lorem ipsum Content</p></div>    <div class=modal-footer>    <span class=tour-nmbrs><a href=# class=tour-step-01>1</a> <a href=# class=tour-step-02>2</a> <a href=# class=tour-step-03>3</a> <a href=# class=tour-step-04>4</a> <a href=# class=tour-step-05>5</a></span>    <a href=# id=tourblock-03 class=btn btn-primary active>Next</a>    </div></div><div class=tour-block tr04><div class=modal-header><a href=# class=close data-dismiss=modal></a><h3>Title Lorem Ipsum</h3></div><div class=modal-body><p>Content Lorem ipsum Content</p></div>    <div class=modal-footer>    <span class=tour-nmbrs><a href=# class=tour-step-01>1</a> <a href=# class=tour-step-02>2</a> <a href=# class=tour-step-03>3</a> <a href=# class=tour-step-04>4</a> <a href=# class=tour-step-05>5</a></span>    <a href=# id=tourblock-04 class=btn btn-primary active>Next</a>    </div></div><div class=tour-block tr05><div class=modal-header><a href=# class=close data-dismiss=modal></a><h3>Title Lorem Ipsum</h3></div><div class=modal-body><p>Content Lorem ipsum Content</p></div>    <div class=modal-footer>    <span class=tour-nmbrs><a href=# class=tour-step-01>1</a> <a href=# class=tour-step-02>2</a> <a href=# class=tour-step-03>3</a> <a href=# class=tour-step-04>4</a> <a href=# class=tour-step-05>5</a></span>    <a href=# class=closebtn>Close</a>    </div></div>
Script for simple feature tour
javascript;jquery;html
If you could simplify your html, I would do something like this:<div class=tour-block>    <h3>Title Lorem Ipsum</h3>    <p>Content Lorem ipsum Content</p></div>(repeat this for each tour block on the site)Then you could do something much more generic for your tour like this:(function ($) {    use strict;    $(function () {        var $tour = $(.tour-block),            len = $tour.length,            i,            steps = '';        for (i = 0; i < len; i++) {            steps += ' <a href=# data-index=' + i + ' data-type=skip>' + (i + 1) + '</a>';        }        $tour.each(function (i) {            var $t = $(this),                title = $t.children('h3').html(),                content = $t.children('p').html(),                replacement = '';            replacement += '<div class=modal-header>';            replacement += ' <a href=#Close class=close data-type=close data-dismiss=modal></a>';            replacement += ' <h3>' + title + '</h3>';            replacement += '</div>';            replacement += '<div class=modal-body>';            replacement += ' <p>' + content + '</p>';            replacement += '</div>';            replacement += '<div class=modal-footer>';            replacement += ' <span class=tour-nmbrs>';            replacement += steps;            replacement += ' </span>';            if (i + 1 === len) {                replacement += ' <a href=# data-type=close class=btn btn-primary active>Close</a>';            } else {                replacement += ' <a href=# data-type=next data-index=' + i + ' class=btn btn-primary active>Next</a>';            }            replacement += '</div>';            $t.html(replacement);        });        $tour.on('click', 'a', function (e) {            var $a = $(this),                type = $a.data('type');            e.preventDefault();            if (type === 'close') {                $tour.hide();            } else if (type === 'skip') {                $tour.hide().eq(+$a.data('index')).show();            } else if (type === 'next') {                $tour.hide().eq(+$a.data('index') + 1).show();            }        });    });}(jQuery));