Javascript show hide div onclick, onclick radio button and hide a div after 10 second, with ul li

In the web design process, some elements (such as div, ul li) need to be hidden sometimes, and some hidden elements need to be displayed sometimes. For example, when a web page is opened, a website announcement is displayed, and after a short period of time, the announcement is hidden. How should this kind of element be displayed or hidden?

There are usually two methods for displaying and hiding html elements. One method is controlled by Css; the other method is to delete the displayed elements, it is suitable for displaying once and does not need to be displayed again, of course, if it need to be displayed again, it can be created.

I. Javascript show hide div

1. Javascript show hide div onclick

Html code:

<div id="divId" class="display">How to display and hide div using javascript</div>
       <div class ="mt">
              <input type="button" id="btnShow" value="Show div" onclick="ShowAndHideDiv('divId', 'show')" />
              <input type="button" id="btnHide" value="Hide div" onclick="ShowAndHideDiv('divId', 'hide')" />
       </div>

Css code:

<style type="text/css">
              .display{display:block;}
              .hide{display:none;}
              .mt{margin-top:10px;}
       </style>

Javascript code:

<script type="text/javascript">
       function ShowAndHideDiv(obj, s) {
              var element = document.getElementById(obj);
              if (element.className == "display") {
                     if (s == "hide") {
                            element.className = "hide";
                     }
                     else {
                            element.className = "display";
                     }
              }
              else {
                            if (s == "show") {
                                   element.className = "display";
                            }
                            else {
                                   element.className = "hide";
                            }
                     }
              }
       </script>

As long as you click the "Hide div" button, the "div" will be hidden; click "Show div", the hidden "div" will be displayed again. This feature is controlled by Css. When you click "Hide div", set the "class" of "div" to "none"; when you click "Show div", you set the "class" to "block".

Effect:

2. Onclick radio button show div javascript

Html code:

<div id="divId" class="hide">Onclick radio button show div javascript</div>
       <div class ="mt">
              <input type="radio" name="radioShow" value="Show div" onclick="ShowAndHideDiv('divId', 'show')" />Show div
              <input type="radio" name="radioShow" value="Hide div" onclick="ShowAndHideDiv('divId', 'hide')" />Hide div
       </div>

Effect:

3. How to hide a div after 10 second in javascript

Html code:

<div id="divId" class="display">How to hide a div after 10 second in javascript</div>
       <div class="mt">Countdown: <span id="spanId" style="color:blueviolet; font-weight:700;"></span></div>

Javascript code:

<script type="text/javascript">
              var i = 10; var timeId;
              function countdown() {
                     timeId = setInterval("HideDivAfterSpecifiedTime()", 1000);
              }
              function HideDivAfterSpecifiedTime() {
                     if (i == 0) {
                            ShowAndHideDiv('divId', 'hide');clearInterval(timeId);
                     }
                     document.getElementById("spanId").innerHTML = i;
                     i--;
              }
              countdown();
       </script>

Effect:

II. Get ul to show and hide with javascript

Html code:

<ul id="ulId" class="display"><li>Get ul to show and hide with javascript</li></ul>
       <input type="button" id="btnShow" value="Show ul li" onclick="ShowAndHideDiv('ulId', 'show')" />
       <input type="button" id="btnHide" value="Hide ul li" onclick="ShowAndHideDiv('ulId', 'hide')" />

The implementation method is the same as that of div hiding and displaying. Just call the above method ShowAndHideDiv() to display and hide ul li.