docs: implement toggle features for documentation content.

There existed another form of this script and styles, but it was not used.

Change-Id: I5d3bf0b4f6b8159e8f837692e9b1613aae140e24

2 files changed, 27 insertions, 23 deletions

diff --git a/tools/droiddoc/templates-sdk/assets/android-developer-docs.css b/tools/droiddoc/templates-sdk/assets/android-developer-docs.css
index 957b2b0..7dd94f9 100644
--- a/tools/droiddoc/templates-sdk/assets/android-developer-docs.css
+++ b/tools/droiddoc/templates-sdk/assets/android-developer-docs.css
@@ -688,22 +688,6 @@ div.special {
   -webkit-border-radius:5px;
 }
 
-.toggle-content-toggleme {
-  display:none;
-}
-
-.toggle-content-button {
-  font-size:.9em;
-  line-height:.9em;
-  text-decoration:none;
-  position:relative;
-  top:5px;
-}
-
-.toggle-content-button:hover {
-  text-decoration:underline;
-}
-
 div.special p {
   margin: .5em 0 0 0;
 }
@@ -840,6 +824,22 @@ p.table-caption {
   margin: 0 0 0.5em 1em; /* matches default table left-margin */
 }
 
+
+/* toggle for misc content (such as long sample code) 
+   see toggleContent() script in android-developer-docs.js */
+.toggle-content.closed .toggle-content-toggleme {
+  display:none;
+}
+
+.toggle-content a {
+  text-decoration:none;
+}
+
+#jd-content .toggle-content img.toggle-content-img {
+  margin:0;
+}
+
+
 /* BEGIN quickview sidebar element styles */
 
 #qv-wrapper {
diff --git a/tools/droiddoc/templates-sdk/assets/android-developer-docs.js b/tools/droiddoc/templates-sdk/assets/android-developer-docs.js
index 19b7602..94391fd 100644
--- a/tools/droiddoc/templates-sdk/assets/android-developer-docs.js
+++ b/tools/droiddoc/templates-sdk/assets/android-developer-docs.js
@@ -575,16 +575,20 @@ function getLangPref() {
 }
 
 
+/* Used to hide and reveal supplemental content, such as long code samples.
+   See the companion CSS in android-developer-docs.css */
 function toggleContent(obj) {
-  var button = $(obj);
-  var div = $(obj.parentNode);
+  var div = $(obj.parentNode.parentNode);
   var toggleMe = $(".toggle-content-toggleme",div);
-  if (button.hasClass("show")) {
+  if (div.hasClass("closed")) { // if it's closed, open it
     toggleMe.slideDown();
-    button.removeClass("show").addClass("hide");
-  } else {
+    div.removeClass("closed").addClass("open");
+    $(".toggle-content-img", div).attr("title", "hide").attr("src", toRoot + "assets/images/triangle-opened.png");
+  } else { // if it's open, close it
     toggleMe.slideUp();
-    button.removeClass("hide").addClass("show");
+    div.removeClass("open").addClass("closed");
+    $(".toggle-content-img", div).attr("title", "show").attr("src", toRoot + "assets/images/triangle-closed.png");
   }
-  $("span", button).toggle();
+  $(".toggle-content-text", obj).toggle();
+  return false;
 }