Expand and hide the first screen page of a mobile phone

I do is the front end of the mobile phone development, everything must be from the experience of mobile phone users to start thinking. We all know that mobile phones are much smaller than PCs, and the things to be accommodated are less than PCs. Some important things and want users to open the mobile site on the first screen can be seen, when it is necessary to show the focus to the user.

Content is composed of text, pictures and other information, if the text is too long, it appears redundant, here is to introduce a way to hide the extra text and expand the extra text.

Required technical Support:CSS3, General JQuery Library;

The HTML code is as follows:

HTML code

1. <Divclass="Slideup">This is a test about javascript function slideUp and  slidedown.this is a test about javascript function slideup and  slidedown.this is a test about javascript function slideup and  slidedown.this is a test about javascript function slideup and  slidedown.this is a test about javascript function slideup and  slidedown.this is a test about javascript function slideup and  slidedown.this is a test about javascript function slideup and  slidedown.this is a test about javascript function slideup and  slidedown.this is a test about javascript function slideup and  slidedown.this is a test about javascript function slideup and slidedown.this is a  test about javascript function slideup and slidedown.this is a  test about javascript function slideup and slidedown.this is a  test about javascript function slideup and slidedown.this is a  test about javascript function slideup and slidedown.this is a  test about javascript function slideup and slidedown.  
3. </div>
5. <a href="javascript:void (0)" class="Btn_click arrowdown"> Expand more </a >

The CSS code is as follows:

CSS Code

2. . Slideup{width:320px;height:auto;overflow:hidden;margin:0 auto;border:1px solid #fff; text-align:center;  Padding:10px;background: #999;color: #fff; Font-weight:bold;border-radius: 0 0 8px 8px;}
4. . the_height{height:450px;}
6. . Slidedown{height:auto;}
8. . btn_click{display:block;width:120px;height:30px;position:relative;line-height:30px;margin:10px Auto;color: #fff  ; background: #999;text-align:center;text-decoration:none;text-indent:-1em;border-radius:5px;}
10. . Arrowup:after{content: ""; width:8px;height:8px;border:3px double #fff;p osition:absolute;top:10px;right:18px;  border-width:3px 3px 0 0;-webkit-transform:rotate ( -45deg);}
12. . Arrowup:before{content: ""; width:6px;height:6px;border:1px solid #fff;p osition:absolute;top:15px;right:20px;  border-width:1px 1px 0 0;-webkit-transform:rotate ( -45deg);}
14. . Arrowdown:after{content: ""; width:8px;height:8px;border:3px double #fff;p osition:absolute;top:8px;right:18px  ; border-width:3px 3px 0 0;-webkit-transform:rotate (135deg);}
16. . Arrowdown:before{content: ""; width:6px;height:6px;border:1px solid #fff;p osition:absolute;top:7px;right:20px  ; border-width:1px 1px 0 0;-webkit-transform:rotate (135deg);}

The JS code is as follows:

JS Code

2. $ ('. Btn_click '). Click (function () {
4. var class_lists=$ ('. Slideup '). attr (' class ');
6. var class_index=class_lists.indexof (' Isdown ');
8. if (class_index==-1) {
10. $ ('. Slideup '). Slidedown (). addclass (' Isdown slidedown ');
12. $ ('. Btn_click '). HTML ("close More"). Removeclass ('arrowdown '). addclass (' arrowup ');
14. }else{
16. $ ('. Slideup '). Slidedown (). addclass (' the_height '). Removeclass (' Isdown slidedown ');
18. $ ('. Btn_click '). HTML ("expand more"). Removeclass ('arrowup '). addclass (' Arrowdown ');
20. }
22. });
24. $ (document). Ready (function () {
26. var article_height=$ ('. Slideup '). Height ();
28. //alert (article_height);
30. if (article_height<=450) {
32. $ ('. Btn_click '). Hide ();
34. $ ('. Slideup '). addclass (' Slidedown ');
36. }else{
38. $ ('. Slideup '). addclass (' the_height ');
40. }
42. });

The final effect is as follows:

If the text height is greater than 450px, hide it as follows:

Expand more text by clicking the Expand More button, as follows:

Here are a few points and we say:

1. The state of the first load of the page: according to the state of the button, the article height is greater than 450px, the button is hidden, and the article height is less than 450px, the button is displayed. When the button is displayed, it is divided into two states, that is, the status of the article and the status of the article unfolded;

2.CSS Focus Analysis:. Slideup: Sets the initial style of the page when the page loads;. the_height: When setting the page load, if the article height is greater than 450px, the class is added; Slidedown: Sets the style when the article expands;. btn _click: Sets the initial style of the button, the. Arrowup:after,.arrowup:before and. Arrowdown:after,.arrowdown:before are set for the direction of the arrows when the article is expanded and closed;

3.js Code parsing: When the HTML document is loaded, first make a judgment, if the article height is less than 450px, then the normal display of the article, expand the Hide button hidden; If the article height is greater than 450px, the height of the article is set to 450px, expand the Close button display. Next, if the height of the article is greater than 450px, the initial state for the article is hidden, after clicking the button, the article goes out of the section, while the button's state changes.

This is the mobile phone end of the article display and hide a summary, hope to communicate.

Expand and hide the first screen page of a mobile phone