Доработана функция отображения и скрытия справки

gofem.html

@@ -23,7 +23,20 @@
         <div id="definition-image">
           <div id="definition-card">
             <h1><span> ф — феминитивы </span></h1>
-            <div id="definition-content"></div>
+            <div id="definition-content" style="visibility: visible;">Введите слово</div>
+	      <div id="definition-help"  style="visibility: hidden;">
+	        <p>ФЕМИНИТИВЫ – это слова женского рода, альтернативные или парные
+                аналогичным понятиям мужского рода, относящимся ко всем людям независимо от их
+                пола.</p>
+
+                <p>При помощи <a href="TODO">этой небольшой программы</a>,реализующей
+                феминистическую логику, вы сами можете создать феминитивы к любому
+                слову.</p>
+
+                <p>Попробуйте: <a href="javascript:tr('автор');">автор</a>, <a
+                href="javascript:tr('врач');">врач</a>.</p>
+              </div>
+            </div>
           </div>
         </div>
         <a class="toolbar" href="javascript:show_help()" title="Справка">?</button>

js/feminitives.js

@@ -17,26 +17,12 @@
 // [ ] TODO: валидация
 // [ ] TODO: адаптивная вёрстка
 // [ ] TODO: favico
+// [ ] TODO: help.toggle
 
 //------------------------------------------------------------------------------
 
 'use strict';
 
-//Вывод справки с примерами использования
-function show_help() {
-	HTML.content().innerHTML = "<div id='definition-help'>"
-	+ "<p>ФЕМИНИТИВЫ – это слова женского рода, "
-	+ "альтернативные или парные аналогичным понятиям мужского рода, "
-	+ "относящимся ко всем людям независимо от их пола.</p>"
-	+ "<p>При помощи <a href='TODO'>этой небольшой программы</a>,"
-	+ "реализующей феминистическую логику, "
-	+ "вы сами можете создать феминитивы к любому слову.</p>"
-	+ "<p>Попробуйте: "
-	+ "<a href=javascript:tr('автор');>автор</a>, "
-	+ "<a href=javascript:tr('врач');>врач</a>.</p>"
-	+ "</div>";
-}
-
 //------------------------------------------------------------------------------
 
 //Иерархия элементов на странице
@@ -48,9 +34,25 @@ var HTML = {
 	dict:       function() { return this._select("dict"); },
 	content:    function() { return this._select("content"); },
 	full:       function() { return this._select("full"); },
-	image:      function() { return this._select("image"); }
+	help:       function() { return this._select("help"); },
+	image:      function() { return this._select("image"); },
 };
 
+//Вывод справки с примерами использования
+function show_help() {
+	HTML.vis(HTML.help());
+	HTML.vis(HTML.content());
+}
+
+HTML.vis = function(e, v) {
+	if (v !== undefined) {
+		e.style.visibility = v;
+		console.log(v);
+	} else {
+		e.style.visibility = e.style.visibility === "visible" ? "hidden" : "visible";
+	}
+}
+
 //Инициализация документа
 HTML.init = function(root) {
 	//Задание базового id для всех элементов
@@ -328,6 +330,9 @@ function tr(word) {
 	HTML.dict().innerHTML = "";
 	HTML.content().innerHTML = "";
 
+	HTML.vis(HTML.help(),    "hidden");
+	HTML.vis(HTML.content(), "visible");
+
 	//Вывод информации
 	if (!wd) {
 		show_help();