JavaScript to achieve text expansion and collapse effect

JavaScript to achieve text expansion and collapse effect

The implementation of expanding and collapsing list-style text is for your reference. The specific contents are as follows

need:

1. When the text exceeds the target value, the target value is intercepted, the others are hidden, and the word "Expand" and the drop-down arrow are displayed at the same time;
2. Click "Expand" to display all text, and change to "Collapse" and the pull-up arrow
3. If the text itself does not exceed the target value, just display all the text

I have thought about using CSS to set the number of lines that need to be hidden, or setting the height of the Li tag to be hidden, but neither of them can meet the third requirement above, so I thought of the following method that can be used

Ideas:

1. Initially traverse the elements that need to be expanded and collapsed, hide them if they exceed the target value, and then save the contents of all tags (which will be used when displaying all later)
2. When you click to expand or collapse, match the stored value according to the current content, and then do the corresponding processing and display it.

HTML

<ul class="outList">
        <li>
            <div>No. 5-14</div>
            <ul class="innerList">
                <li class="wordsContent">11111111111111111111111</li>
                <li class="wordsContent">22222222222222222222222</li>
                <li class="wordsContent">33333333333333333333333</li>
            </ul>
        </li>
        <li>
            <div>No. 5-15</div>
            <ul class="innerList">
                <li class="wordsContent">4444</li>
                <li class="wordsContent">55555555555555555555555555</li>
                <li class="wordsContent">6666666666666666666666666</li>
            </ul>
        </li>
</ul>

CSS

ul,li {
   list-style: none;
 }
.innerList>li {
     margin-bottom: 0.2rem;
     border-bottom: 0.01rem solid green;
     box-sizing: border-box;
     padding: 0.2rem 5% 0.7rem 3%;
     position: relative;
     margin-bottom: 0.3rem;
 }
 .open {
     font-size: 0.22rem;
     color: #12309E;
     position: absolute;
     right: 0.2rem;
     bottom: 0.1rem;
     font-weight: bold;
 }
 .close {
     font-size: 0.22rem;
     color: #12309E;
     position: absolute;
     right: 0.2rem;
     bottom: 0.1rem;
     font-weight: bold;
 }

JS

//Expand and collapse the news var objList = $(".wordsContent"); //The li tag elements that need to be expanded and collapsed var maxNum = 5; //The length of the target value var arr = []; //All the texts that need to be expanded and collapsed objList.delegate(".open", "click", function () {
    openClose(true, this)
})
objList.delegate(".close", "click", function () {
    openClose(false, this)
})
// Initialize the package. The purpose of initialization is 1: store the original content of the Li tag; 2: hide the text that exceeds the target value function init(objList, maxNum) {
    objList.each(function (index, item) {
        arr.push($(item_).text())
        if ($(item).text().length > maxNum) {
            $(item).html($(item).text().substr(0, maxNum) + "<span class='open'>Expand<img src='./image/down^.png'/></span>")
        }
    })
}
init(objList, maxNum)

//Encapsulation function for expanding and collapsing openClose(boo, clickObj) {
    var final = '';
    arr.map(function (item, index) {
        if (item.match($(clickObj).parents(".wordsContent").text().substring(0, $(clickObj).parents(".wordsContent").text().length - 2))) {
            final = item
        }
    })
    if (boo) {
        $(clickObj).parents(".wordsContent").html(final + "<span class='close'>收起<img src='./image/up^.png'/></span>")
    } else {
        $(clickObj).parents(".wordsContent").html(final.substr(0, maxNum) + "<span class='open'>Expand<img src='./image/down^.png'/></span>")
    }
}

Effect

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • vue.js implements click to expand and collapse animation effect
  • JavaScript implementation of IE6 compatible collapse and expansion effects
  • Native JS imitates QQ reading click to expand and collapse effect
  • Native js realizes the function of expanding/collapse full text of news list
  • How to control the collapse and expansion of web page layers using JavaScript
  • A packaged js code-----expand and collapse effect example
  • I wrote a js effect that can expand and collapse
  • The effect of a javascript ad that slowly expands and then slowly collapses

<<:  Tutorial on installing MySQL with Docker and implementing remote connection

>>:  Three ways to prevent MySQL from inserting duplicate data

Recommend

Summary of Vue 3 custom directive development

What is a directive? Both Angular and Vue have th...

A brief analysis of the usage of HTML float

Some usage of float Left suspension: float:left; ...

Detailed explanation of how to use Vue to load weather components

This article shares with you how to use Vue to lo...

Detailed explanation of the text-fill-color property in CSS3

What does text-fill-color mean? Just from the lit...

Introduction to who command examples in Linux

About who Displays users logged into the system. ...

React implements dynamic pop-up window component

When we write some UI components, if we don't...

Installation tutorial of mysql8.0rpm on centos7

First, download the diagram 1. First uninstall th...

Basic usage of custom directives in Vue

Table of contents Preface text 1. Global Registra...

Complete steps for vue dynamic binding icons

0 Differences between icons and images Icons are ...

How to solve the problem that mysql cannot be closed

Solution to mysql not closing: Right-click on the...

WeChat applet implements the Record function

This article shares the specific code for the WeC...

MySQL daily statistics report fills in 0 if there is no data on that day

1. Problem reproduction: Count the total number o...

How to use ElementUI pagination component Pagination in Vue

The use of ElementUI paging component Pagination ...