Simple click show/close effect (native JS version and JQ Version)

Extensible simple Click Show/close effects are implemented using native JavaScript and jquery. For usage and Related explanations, see source code.
In addition, it is better to teach people to fish. I wrote only a prototype, providing a method of thinking. I also noted in the remarks. If you want the cool effect, you can expand according to your actual needs.
View Demo:Click here to view the demo
Native JS version:

2. Window.Onload=Function(){
4. var divs = document . getelementsbytagname ( ' Div ' ) ; // locate all DIV elements
6. for ( var I = 0 ; I divs . length ; I ++ ) {
8. If(Divs[I].Classname! ='Jsdemo') Continue;// If the element class value is not jsdemo, continue searching
10. // Divs [I]. style. Display = 'none'; // if you want to hide it by default, you can cancel this line of comment.
12. var title = divs [ I ] . previussibling ; // locate the title element from the previous element
14. If(Title.Nodetype! =1){// To ensure that the element node is found
16. Title=Title.Previussibling;
18. }
20. Title.Next=Divs[I];// Set the next attribute of the title and point to Div [I]
22. Title.Onclick=Function(){// Click an event
24. VaR Curstyle=This.Next.Style.Display;// Take the default display value of Div [I]. Now you know the intention of title. Next.
26. VaR Newstyle;// Define a new display value
28. var ICO = title . getelementsbytagname ( ' span ' ) [ 0 ] ; // nodes that contain the show and close button
30. If(Curstyle='None'){// Click expand to close the retrieval result.
32. Newstyle='Block';// Switch to visible when the default value is hidden
34. ICO.Innerhtml='-';// Switch the Show button
36. }Else{
38. Newstyle='None';// Switch to hidden when the default value is visible
40. ICO.Innerhtml='+';// Switch the Show button
42. };
44. Title.Next.Style.Display=Newstyle;// Assign a value to the DIV [I] After clicking
46. }
48. }
50. }

JQ version:

2. $(Function(){
4. VaR$Title= $('Div. jqdemo');// Find the element to display/hide
6. /// $ Title. Hide (); // if you want to hide it by default, you can cancel this line comment. The following two switching functions change the position
8. $ title . Prev () . toggle ( function () { // display or hide the previous element (retrieve the title element) set click switching event
10. $ title . hide () . Prev () . Find ( ' span ' ) . text ( ' + ' ) ; // when you click, hide the DIV element, locate the span in the title element, and click
12. } , function () {
14. $ title . show () . Prev () . Find ( ' span ' ) . text ( ' - ' ) ; // when you click the second time, show the DIV element, locate the span in the title element, and click the switch button
16. });
18. // JQCodeIsn't it concise and beautiful? haha. Just a few lines of code to get it done. By modifying show ()/hide (), you can get cool results.
20. });