Emlog adds a button to read the rest of the article

Station construction
two thousand six hundred and thirteen zero

Adding the reading function itself is very poor, but you can add it selectively for the sake of beautiful page.
Tutorial Start

1. First add css to the article div

overflow: hidden;

2. Then add a section of button and js code

 <div class="rest button content" id="rest button content" style="display: none;"><div id="rest button" onclick="rest_butt();" style="margin: 1rem auto; line height: 2.3rem; display: block; width: 8rem; border radius: 5px; border: 1px solid # 6f8ec5; text align: center; cursor: pointer; color: # 6f8ec5;">Read the rest</div></div> <script> if($('.art-content').height()>600){ //If the content page height is greater than 600 $('.art-content').height('600'); $('#rest-butt-content').show(); //Control the height of the content page to 600 //And the button is in display status }else{ //Otherwise, the Read More button will not appear $('#rest-butt-content').hide(); } function rest_butt(){ $('.art-content').height('100%'); $("#rest-butt-content").remove(); } </script>

The above code can be added to the end of the article, and should not be in a div. (Please modify the specific class used according to your own class/id)

Refer to the screenshot below to add code

 AEimg-1529540871-46.png

After the above operations are completed, you can click the button to read more content.

Last updated August 15, 2018
comment ( 0 )
O ω O
Private comments