SoFunction
Updated on 2025-03-08

Native js implements the function of expanding/collapse full text

Key points of knowledge

1. The implementation principle is very simple. Click the a tag to set the display attribute of the div to hide or display.

Mainly mastering dom operations.

2. DOM operations required:

parentNode gets the parent element

nextSibling gets the next follower node

PreviousSibling gets the previous follower node

3. Notes:

Consider that when clicking to expand the full text, other expanded full texts should be closed.

When using nextSibling to obtain the next node, the judgment of different browsers is different

Some are getting elements, and some are getting newlines or spaces, so here we need to use nodeType to determine that the data type nodeType only returns numbers 1, 2, and 3.

Only when 1 is returned is the element node

(I didn't consider this issue when I was doing it, and I thought something was wrong and I had been doing it for a long time)

Also, since there is no dom operation in js that gets all elements of the same level like in jquery, I wrote siblings(elm)

Can also be used in the future, once and for all

Complete code

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear: both;float: none;height: 0;overflow: hidden;}
body{color:#333; font: 12px/1.3 'Arial','Microsoft YaHei';}
#pn{width: 650px; height: auto; background: #fff; margin: 0 auto; padding: 5px;}
#list0{margin-bottom: 10px;}
.title{ font-weight: bold; font-size: 14px; margin-bottom: 7px;}
.time{color: #808080; margin-bottom: 2px;}
.content{display: none; padding: 1px 0 3px; line-height: 23px; font-size: 14px; }

.btm{text-align: right; height: 30px; }
.hidd{ color: #eb7350; margin-left: 5px; }
.show{ color: #eb7350; margin-left: 5px; }
.zy{padding: 1px 0 3px; line-height: 23px; font-size: 14px;}
</style> 
</head> 
<body>
 <div >
 <div >
 <p class="title">JackieJiji</p>
 <p class="time">12moon3day 20:49 From +niPhone 6s</p>
 &lt;p class="zy"&gt;grateful@At the intersectionYY Today's treat！I always think you two are beautiful and interesting，All are top students，It's really a lucky thing to know you！~ Finally achieved the right result~I wish you a happy wedding and a long life~ grateful...&lt;a class="show" href="#">Expand the full text</a></p> &lt;div class="content"&gt;grateful@At the intersectionYY Today's treat！I always think you two are beautiful and interesting，All are top students，It's really a lucky thing to know you！~ Finally achieved the right result~I wish you a happy wedding and a long life~ grateful@SNH48-Yang Yunyu-- Let's meet each other[Stories]Let's go to the performance together in the future~ All teams are。
 &lt;a href="#" class="hidd">Collapse full text</a> &lt;/div&gt;
 &lt;/div&gt;

 &lt;div &gt;
 &lt;p class="title"&gt;Gao Xiaosong&lt;/p&gt;
 &lt;p class="time"&gt;44Minutes ago From Weibo &lt;/p&gt;
 &lt;p class="zy"&gt;The magnificent struggle for independence，The surging liberation movement，Castro Pomo writing half of Cuba history alone。Wear a famous watch and drive a luxury car to a famous school，The pro-American rich second generation Castro embarked on the revolution early on because of genes？Lucky luck，How can Lao Ka finish sleeping in his lifetime?35000A woman？Gao Xiaosong用数据还原真实的古巴，看今day...&lt;a class="show" href="#">Expand the full text</a></p> &lt;div class="content"&gt;The magnificent struggle for independence，The surging liberation movement，Castro Pomo writing half of Cuba history alone。Wear a famous watch and drive a luxury car to a famous school，The pro-American rich second generation Castro embarked on the revolution early on because of genes？Lucky luck，How can Lao Ka finish sleeping in his lifetime?35000A woman？Gao Xiaosong用数据还原真实的古巴，看今day的它究竟是落后贫穷还是盛世繁华：LXiaosong Qi Talks about the Legend of Revolutionary Leader Castro
 &lt;a href="#" class="hidd">Collapse full text</a> &lt;/div&gt;
 &lt;/div&gt;
 &lt;div &gt;
 &lt;p class="title"&gt;Wang Nima&lt;/p&gt;
 &lt;p class="time"&gt;12moon7day 12:30 From Weibo&lt;/p&gt;
 &lt;p class="zy"&gt;Retired US Houston Texans football team wide receiver Andre·Johnson，for12Children selected by Child Protection Services to buy Christmas toys，Children can80Within seconds...&lt;a class="show" href="#">Expand the full text</a></p> &lt;div class="content"&gt;Retired US Houston Texans football team wide receiver Andre·Johnson，for12Children selected by Child Protection Services to buy Christmas toys，Children can80Within seconds选择他们喜欢的任何玩具，The toys are finally costing19144.58Dollar，generous！OK OK OK Don't mess around，In terms of racing, it is still time for veteran drivers to take action！
 &lt;a href="#" class="hidd">Collapse full text</a> &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;script type="text/javascript"&gt; 
 //Execute multiple function schemes immediately after the page is loaded. function addloadEvent(func){
 var oldonload=;
 if(typeof  !="function"){
  =func;
 }
 else{
  =function(){
  if(oldonload){
   oldonload(); 
  }
  func();
  }
 }
 }
 addloadEvent(b);
 //Execute multiple function schemes immediately after the page is loaded. //Get all elements at the same level to start function siblings(elm) {
 var a = [];
 var p = ;
 for(var i =0,pl= ;i&lt;pl;i++){
 if(p[i] !== elm) (p[i]);
 }
 return a;
 }
 //End all elements of the same level function b(){
 //Get the a tag to view the full text var show=("show");
 //Traveling a for(var i=0;i&lt;;i++){
 show[i].onclick=function(){
 //Find the parent of a var father=;
 //Set hidden ="none";
 //Find the next node of the parent var next=;
 //Judge the data type of the next node. If it is not 1 (element node), then continue to look for it. if(!=1){
 next=;
 }
 //Text display ="block";
 //Get the entire list0 var ff=;
 //Get all elements of the same level that remove list0 var bro=siblings(ff);
 for(var y=0;y&lt;;y++){
 //Get the first content class name in each list0 var w=bro[y].getElementsByClassName("content")[0];
 //Get the previous node of the content class name var wt=;
 //Judge the data type of the previous node. If it is not 1 (element node), then look up if(!=1){
 wt=;
 }
 //Same level summary part display ="block";
 //The full text of the same level is hidden ="none";
 }  
 }
 }
 //The following is the same as the expansion principle when clicking to retract the full text var hidd=("hidd");
 for(var i=0;i&lt;;i++){
 hidd[i].onclick=function(){
 var fafa=;
 ="none";
 var pre=;
 if(!=1){
 pre=;
 }
 ="block";
 }
 }
 } 
 &lt;/script&gt;
&lt;/body&gt; 
&lt;/html&gt;

The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!