Explain that the address book pairs human-readable names with I2P Destinations on the index page

apps/susidns/src/js/messages.js

@@ -58,6 +58,30 @@ function ToggleImportFormTableView() {
   }
 }
 
+function ToggleHowView(){
+  var pHow = document.getElementsByClassName("howitworks");
+  var i;
+  for (i = 0; i < pHow.length; i++) {
+    pHow[i].classList.toggle("invisible");
+  }
+  var idHow = document.getElementById("howitworks");
+  if (idHow != null) {
+    idHow.classList.toggle("expanded");
+  }
+}
+
+function ToggleWhatView(){
+  var pWhat = document.getElementsByClassName("whatitis");
+  var i;
+  for (i = 0; i < pWhat.length; i++) {
+    pWhat[i].classList.toggle("invisible");
+  }
+  var idWhat = document.getElementById("whatitis");
+  if (idWhat != null) {
+    idWhat.classList.toggle("expanded");
+  }
+}
+
 function initClickables() {
 
   /*Hide the storage path by default, show it if someone clicks on the header*/
@@ -112,6 +136,24 @@ function initClickables() {
   if (clickableForm2 != null) {
     clickableForm2.addEventListener('click', ToggleImportFormTableView, true);
   }
+
+  var pHow = document.getElementsByClassName("howitworks");
+  i = 0;
+  for (i = 0; i < pHow.length; i++) {
+    pHow[i].classList.add("invisible");
+  }
+  var idHow = document.getElementById("howitworks");
+  if (idHow != null) {
+    idHow.addEventListener('click', ToggleHowView, true);
+  }
+
+  var pWhat = document.getElementsByClassName("whatitis");
+  var idWhat = document.getElementById("whatitis");
+  if (idWhat != null) {
+    idWhat.classList.add("expanded");
+    idWhat.addEventListener('click', ToggleWhatView, true);
+  }
+
 }
 
 document.addEventListener("DOMContentLoaded", function() {

apps/susidns/src/jsp/index.jsp

@@ -62,29 +62,29 @@
 </div>
 <hr>
 <div id="content">
-<h3><%=intl._t("What is the address book?")%></h3>
-<p>
+<h3 id="whatitis"><%=intl._t("What is the address book?")%></h3>
+<p class="whatitis">
 <%=intl._t("The address book application is part of your I2P installation.")%>
+<%=intl._t("You can use it to connect human-readable names, like i2p-projekt.i2p, to I2P Destinations.")%>
+</p><p class="whatitis">
 <%=intl._t("It regularly updates your hosts.txt file from distributed sources or \"subscriptions\".")%>
-</p>
-<p>
 <%=intl._t("In the default configuration, the address book is only subscribed to {0}.", "i2p-projekt.i2p")%>
 <%=intl._t("Subscribing to additional sites is easy, just add them to your <a href=\"subscriptions\">subscriptions</a> file.")%>
 </p>
-<p>
+<p class="whatitis">
 <%=intl._t("For more information on naming in I2P, see <a href=\"http://i2p-projekt.i2p/naming.html\" target=\"_blank\">the overview</a>.")%>
 </p>
-<h3><%=intl._t("How does the address book application work?")%></h3>
-<p>
+<h3 id="howitworks"><%=intl._t("How does the address book application work?")%></h3>
+<p class="howitworks">
 <%=intl._t("The address book application regularly polls your subscriptions and merges their content into your \"router\" address book.")%>
 <%=intl._t("Then it merges your \"local\" address book into the router address book as well.")%>
 <%=intl._t("If configured, the router address book is now written to the \"published\" address book, which will be publicly available if you are running an I2P Site.")%>
-</p><p>
+</p><p class="howitworks">
 <%=intl._t("The router also uses a private address book, which is not merged or published.")%>
 <%=intl._t("Hosts in the private address book can be accessed by you but their addresses are never distributed to others.")%>
 <%=intl._t("The private address book can also be used for aliases of hosts in your other address books.")%>
 </p>
-<div class="illustrate">
+<div class="illustrate howitworks">
 <object type="image/svg+xml" data="images/how.svg?<%=net.i2p.CoreVersion.VERSION%>">
 <img src="themes/images/how.png" border="0" alt="address book working scheme" title="How the address book works" class="illustrate" />
 </object>

apps/susidns/src/themes/light/susidns.css

@@ -299,6 +299,22 @@ div.help h3, #add h3, #import h3 {
      background-position: .5%, 15% !important;
 }
 
+#howitworks {
+     padding: 5px 32px;
+     margin: -1px -16px 0;
+     background: url(/themes/console/light/images/dropdown.png) #f8f8ff;
+     background-repeat: no-repeat !important;
+     background-position: .5%, 15% !important;
+}
+
+#whatitis {
+     padding: 5px 32px;
+     margin: -1px -16px 0;
+     background: url(/themes/console/light/images/dropdown.png) #f8f8ff;
+     background-repeat: no-repeat !important;
+     background-position: .5%, 15% !important;
+}
+
 .expanded {
      background: url(/themes/console/light/images/dropdown_active.png) #f8f8ff !important;
      background-repeat: no-repeat !important;