如何使用css / javascript根据设备宽度使折叠div不同的div高度

我无法使用java在各种宽度的设备中根据各种高度使div折叠展开，但可以使用CSS和媒体查询来进行同样的操作。如果任何人都可以使用简单的javascript（而不是jQuery）做到这一点，请发布答案。在下面的代码中，我使用CSS为不同高度的div展开-折叠提供了代码-

HTML-

<div>
<p>Lorem ipsum dolor sit amet, sea mutat regione discere cu. Et vix aperiam    
accusata deterruisset, no ius evertitur sententiae.</p>
<input class="toggle-box2" id="header2" type="checkbox" >
<label class="label1" for="header2"><span class="displayText2"></span>  
</label>
<div class="more-mobile" id="foo2"> <p> Ne movet ocurreret salutatus vix,  
 mnesarchum moderatius eos no. Graeci feugait expetenda ius an. Ne veri  
 referrentur efficiantur mea. Probatus definiebas cu ius, nec aeque soluta  
 hendrerit an.</p>

 <input class="toggle-box" id="header1" type="checkbox" >
 <label class="label1" for="header1"><span class="displayText"></span> 
 </label>

 <div class="more-one" id="foo">
 <p>Duo id dignissim necessitatibus. Te ornatus accusamus mei, pri id soleat   
 euismod tractatos, eos laudem fabulas eu. Possim philosophia quo eu,  
 accumsan erroribus moderatius pri ex, in vel fuisset antiopam. Doctus 
 vocent ut quo, nam suscipiantur interpretaris ea, duo ea eruditi epicuri  
 apeirian.</p>

 <p>An semper pertinacia vituperatoribus sea, mea ei natum oratio scaevola,   
 at eum tation persius offendit. Quas deserunt his cu, cum eirmod regione   
 eu, ut idque sadipscing has. Nulla iuvaret mel an. Mei eu dicunt 
 assueverit.</p>

 <label class="less" for="header1"><span style="float:right;"  
 class="displayText3">See Less</span></label>
 </div>
 </div>

 </div>

这是CSS代码-

  span.displayText2 {
  display: none;
  }

  span.displayText, span.displayText2, span.displayText3 {
  color:blue;
  cursor:pointer;
  }
  .toggle-box,.toggle-box2 {
   display: none;
   }

  .toggle-box ~ div#foo.more-one {
   display: none;
   }

   .toggle-box:checked ~ div#foo.more-one {
   display: block;
   }
   span.displayText:before, span.displayText2:before {

   content:"See More...";
   }
   .toggle-box:checked ~ .label1 span.displayText:before, .toggle-  
   box2:checked ~ .label1 span.displayText2:before {

   content:"See Less";
   }
   @media screen and (max-width: 766px){ 
   span.displayText, span.displayText3 {
   display: none;
   }
   span.displayText2 {
   display: block !important;
   }
   span.displayText, span.displayText2 {
   margin-top: -5px;
   }
   .toggle-box2 ~ div#foo2.more-mobile {
   display:none;
   }

   .toggle-box2:checked ~ div#foo2.more-mobile {
   display:block;
   }
   .toggle-box ~ div#foo.more-one {
   display: block !important;
   }
   }

您可以在此处查看codepen- http: //codepen.io/anon/pen/wKdZRE

注意-请将Codepen视图从水平更改为垂直，以查看媒体查询工作，并在垂直视图（即较小宽度的设备）中仅显示第一个参数，而在较宽视图的设备中则保持隐藏，而前两个参数为显示，其余隐藏。