Vertical Tabs

The W3 Schools on vertical tabs repeats much of the code of the horizontal
tabs. What makes the difference in alignment is the assignment of 30%, 70%
to the tabs and information, along with a float:left directive. This latter function tells
an element to position itself on the left ( and thus indirectly tells the following element
to squeeze into the right).

In the example below, I have changed 30% to 50%, making it impossible for
the content to take up 70% of the space. It then places itself below the tabs.

What puzzled me about the example is the programmatic assignment of London as the
default city - in the script - but right after the function. So this code opens showing
the information on London, but why doesn't it revert to London after I have clicked on Paris.

The element.click() event as here defined is something that happens on load, but not at other
times. It is not a function, and nothing triggers it...

https://plnkr.co/edit/220jN7Q8VBTQYLfZPP0N?p=info