JavaScript Practical Tips-Implementing columns Display

Remember to Brother Siang the test system, see their test page can be implemented to hide the left side of the examinee information part, at that time feel good tall on, good humanization. Now that I've learned JavaScript, I can do the same, and show off.

1. Page Design:

(1). html code:

<title>js Sub-column </title><style type= "Text/css" >.alignment{text-align:center;} </style>
(2). Description: In fact, this page is very simple, just a row of three columns of the table. The first part puts the column name, the third part is the main content . The middle part put a picture of the Left (right) arrow, previously thought more, thought is a very cow control. 

2.javascript Code:
<script language= "javascript" type= "Text/javascript" >function Hide ()//Click the left arrow to hide the section {// The first step: Hide the column list document.getElementById ("Lanmu"). style.display= "None";//Second step: Change the arrow image at the same time, The left arrow responds with an event that shows show () document.getElementById ("pic"). Innerhtml= " ';} function Show ()//Click on the right arrow to display the hidden column section {//First step: Display the column list document.getElementById ("Lanmu"). style.display= "";//Second step: Change arrows at the same time, The left arrow responds with an event that hides hide () document.getElementById ("pic"). Innerhtml= " ';} </script>
(1) Effect:

(2) Description: the "left arrow" is initially displayed, click on the image will respond to the hide () event, the section is hidden, while the left arrow is replaced by the right arrow. When the "right arrow" is clicked, it responds to the show () event, shows the hidden column section, and changes the right arrow to the left arrow and back to the original state. This is actually very simple and easy to do.

Through this stage of JavaScript learning, it feels interesting. In the case of nothing before, always think hard, give yourself psychological pressure, when personally to experience, found that it is so, slowly cultivate the interest of learning. Now when you log into a website or use a software, you will not consciously consider how it is implemented, where it is done well, where it needs to be improved, and gradually approaching a professional.
JavaScript to learn a lot of things, today is just the tip of the iceberg, with interest and curiosity to continue to refuel!

JavaScript Practical Tips-Implementing columns Display