Just CSS. Absolutely NO jQuery/javascript or any other programming language.

Another demonstration update.

My original version of this was produced on 18th February 2010 and used the latest CSS available at this time. This original version has been removed in the site update.

It used over 50 lines of CSS and around 140 lines of html code.

This new version uses around 80 lines of CSS and 60 lines of html code.

The CSS graphics are much improved and the ease of play is better, with the ability to play as the following rules.

The Tower of Hanoi (also called The problem of Benares Temple or Tower of Brahma or Lucas' Tower and sometimes pluralized as Towers, or simply pyramid puzzle) is a mathematical game or puzzle consisting of three rods and a number of disks of various diameters, which can slide onto any rod.

The puzzle begins with the disks stacked on one rod in order of decreasing size, the smallest at the top, thus approximating a conical shape. The objective of the puzzle is to move the entire stack to the last rod, obeying the following rules:

1. Only one disk may be moved at a time.
2. Each move consists of taking the upper disk from one of the stacks and placing it on top of another stack or on an empty rod.
3. No disk may be placed on top of a disk that is smaller than it.

With 3 disks, the puzzle can be solved in 7 moves. The minimal number of moves required to solve a Tower of Hanoi puzzle is 2n − 1, where n is the number of disks.

To move a disc click/tap on the disc and it will slide up, then click/tap on the rod to which you want to move the disc and it will slide down this rod (as long as the rod is empty or the disc already on the rod is larger that the selected disc).

The stylesheet for this demonstration is in the page head, but if you use this, please keep my copyright comment with the stylesheet and ask permission first.