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

Mysql splits string into array through stored procedure

To split a string into an array, you need to use ...

What are the new CSS :where and :is pseudo-class functions?

What are :is and :where? :is() and :where() are p...

Tutorial for installing MySQL 8.0.18 under Windows (Community Edition)

This article briefly introduces how to install My...

MySQL 5.7.17 Compressed Version Installation Notes

This article shares the installation steps of MyS...

In-depth explanation of environment variables and configuration files in CentOS

Preface The CentOS environment variable configura...

Linux kernel device driver character device driver notes

/******************** * Character device driver**...

Writing a web calculator using javascript

This article mainly records the effect of using j...

Detailed explanation of building MySQL master-slave environment with Docker

Preface This article records how I use docker-com...

Descending Index in MySQL 8.0

Preface I believe everyone knows that indexes are...

An audio-visual Linux distribution that appeals to audiophiles

I recently stumbled upon the Audiovisual Linux Pr...

Selection and thinking of MySQL data backup method

Table of contents 1. rsync, cp copy files 2. sele...

MySQL table type storage engine selection

Table of contents 1. View the storage engine of t...

canvas.toDataURL image/png error handling method recommendation

Problem background: There is a requirement to tak...

A link refresh page and js refresh page usage examples

1. How to use the link: Copy code The code is as f...