animation effects are added for <div class=tips>

git-svn-id: https://svn.code.sf.net/p/xcat/code/xcat-core/trunk@4089 8638fb3e-16cb-4fca-ae20-7b5d299a9bcd

xCAT-UI/css/main.css

@@ -363,7 +363,7 @@ padding:10px 2px;
     display: block;
 }
 
-#tips  {
+.tips  {
     margin-right: 10px;
     margin-left: 10px;
     padding: 10px;
@@ -373,6 +373,9 @@ padding:10px 2px;
     border-bottom: 1px dotted #555;
     /*display: none;*/
 }
+.tips_head {
+    color: #339933;
+}
 
 #monlist_table {
     margin-right: 30px;
@@ -478,4 +481,4 @@ padding:10px 2px;
     float: left;
     background-color:#FAF8CC;
     text-align: left;
-}
+}

xCAT-UI/js/xcat.js

@@ -524,5 +524,19 @@ function rmc_monshow_back_to_opts() {
     $("#monshow_opt").show("slow");
 }
 
+function handle_tips() {
+    ///add dynamic effects for <div class="tips">
+    $(".tips > .tips_content").hide();
+    $(".tips > .tips_head").click(function() {
+        if($(".tips > .tips_content").css("display") == "none") {
+            $(".tips > .tips_head").html("<b>Tips:</b>(Click me to remove tips)");
+            $(".tips > .tips_content").show("slow");
+        }else {
+            $(".tips > .tips_head").html("<b>Tips:</b>(Click me to display tips)");
+            $(".tips > .tips_content").hide("slow");
+        }
+    });
+}
+
 // load progress bar
 myBar.loaded('xcat.js');

xCAT-UI/lib/monitor_display.php

@@ -52,11 +52,18 @@ function displayTips($tips)
     //  "Click the name of each plugin, you can get the plugin's description.",
     //  "You can also select one plugin, then you can set node/application status monitoring for the selected plugin.",
     //}
-    echo '<div id="tips"><p><b>Tips:</b></p>';
+    echo '<div class="tips">'; 
+    echo '<p class="tips_head"><b>Tips:</b>(Click me to display tips)</p>';
+    echo '<div class="tips_content">';
     foreach ($tips as $tip) {
         echo "<p>$tip</p>";
         echo "\n";
     }
+    echo "</div>";
+
+    echo '<script type="text/javascript">';
+    echo '$(handle_tips());';
+    echo '</script>';
     echo '</div>';
     return 0;
 }