html-003-Analog IDE Code expansion and unwinding function simple example

Yourselves we use programming tools (such as Eclipse, Sublime, and so on) in our daily programming development to have the appropriate code folding capabilities, as shown, which greatly facilitates our coding efforts.

At the same time, we in the daily Web page, especially the vast majority of the blog site of the source Display section, are used in this way, as shown (example reference location:008-selenium Action drop-down list instance-select):

What is the point of doing this? I think the actual application of the following two kinds:

1. Content display and Hide: The user is most concerned about the content of interest to the user, if users want to continue to understand, you can click on the show or hide the button to see, hide the purpose of the content, in the smallest display area, showing more users interested in the content of the consultation;
2. Apply to a variety of online reports: For example, when people in different positions of a company look at a report differently, they can show or hide part of the content for different positions, save time for the person concerned, and optimize the system experience. However, this method is also used in the daily reports of the current CI.

So how do we do that? Here is a simple explanation for this, and the simple steps to implement this feature are as follows:

1. Create a div:a as the parent information container
2. Create two elements in container A, such as a label, to indicate a button like expand/hide; a div:b, as a child information container (initially not shown), which holds the information that needs to be displayed
3. Controls whether the child container B is displayed through the onclick of the label

Directly on the code, please see the small master, if there are shortcomings, please the great god, thank you very much!

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "http://www.w3c.org/TR/1999/REC-html401-19991224/ Loose.dtd ">
The actual display results are as follows:
Of course, the above example, with the IDE or Cnblogs in the display of the hidden effect is very far away, interested in the small owners can self-study, and thus achieve the IDE or Cnblogs equivalent display, again no longer do the detailed description.
At this point, html-003-simulation of the IDE code to expand the function of a simple example of a smooth end, I hope this article can give you a copy of the HTML reference.
Finally, very grateful to the pro-stop, I hope this article can be pro helpful. Warmly welcome the kiss to discuss together and progress together. Thank you so much! ^_^
html-003-Analog IDE Code expansion and unwinding function simple example