Юрий

Почему вы используете таблицы для верстки, ведь гораздо проще и семантически правильно с помощью чистых списков ul (тем более, что вы используете многоуровневые списки - доступно с некоторыми простыми операциями здесь) или ol.

Также эту задачу можно решить с помощью псевдокласса :checked в CSS, он поддерживается, начиная с IE 9.0+, Chrome 1.0+, Opera 9.0+, Safari 3.1+, Firefox 1.0+, Android 1.0+, iOS 2.0+. Но сделать также легко, как это можно сделать с помощью JS, тут не получится, но я сторонник того, чтобы все что можно сделать без JS, нужно делать без JS)

Если вам нужно, например, показать в модальном окне вашу карту, так запускайте инициализацию именно тогда, когда человек вызвал это модальное окно, зачем на фоне загружать пользователю то, чем он может не воспользоваться.

Подключайте JS следующим образом перед закрывающим body:

<script>var scr = {"scripts":[
		{"src" : "ваш_скрипт.js", "async" : false},
		]};!function(t,n,r){"use strict";var c=function(t){if("[object Array]"!==Object.prototype.toString.call(t))return!1;for(var r=0;r<t.length;r++){var c=n.createElement("script"),e=t[r];c.src=e.src,c.async=e.async,n.body.appendChild(c)}return!0};t.addEventListener?t.addEventListener("load",function(){c(r.scripts);},!1):t.attachEvent?t.attachEvent("onload",function(){c(r.scripts)}):t.onload=function(){c(r.scripts)}}(window,document,scr);
	</script>

Чтобы не тормозить загрузку страницы. Тогда Google PageSpeed не будет ругаться на эти файлы.

Так вы просто объедините анимации на одном timeline.

А если вам нужно, чтобы сначала на одном элементе появлялась анимация, заканчивалась, а затем появлялась на другом... И так далее, то здесь вам поможет JS.