js operates on the css attribute to achieve the div layer expansion closure effect

This article illustrates how js operates on the css attribute to achieve the div layer expansion and closure effect. Share to everybody for everybody reference. The specific analysis is as follows:

Recently, I learned javascript and came into contact with js's operation on css attribute. I wrote an open and close effect and realized the button text switch, which is very simple! This section of the Js object manipulates the css property to enable the div layer to be expanded and closed. Share the code with the JS front-end designer.

<title>js operation div A closed </title>
<style>
  #jb51 { border: solid 1px #EEE; 
    background:#F7F7F7; 
    margin:20px; 
    padding:10px; 
    display:none;
    width:300px;    
  }
</style>
<input style="cursor:pointer" onclick="show('jb51');"
type='button' value=' an ' id='inp'>
<div id="jb51"> Script home programming source code, site source code, web materials, 
 Book tutorials, website templates, web effects code! </div>
<script>
function show(id){
  var aiin = document.getElementById(id);
  var inp= document.getElementById('inp');
  if(aiin.style.display != 'block'){
    aiin.style.display = 'block';
    inp.value=' Shut down ';
  }else{
    aiin.style.display = 'none';  
    inp.value=' an ';
  }
}
</script>

I hope this article has been helpful for your javascript programming.