https://khshield.com/template/js/module/ShowHideModule.js

1export default function ShowHideModule() {
2    const showhideBlocks = document.querySelectorAll(".show-hide-block");
3    if (showhideBlocks) {
4        showhideBlocks.forEach((item) => {
5            const dataShow = item.getAttribute("data-init");
6            const dataShowText = item.getAttribute("data-show");
7            const dataHideText = item.getAttribute("data-hide");
8            const dataBtn = item.querySelector('.show-hide-btn')
9            const showhideContents = item.querySelector(".show-hide-content");
10            dataBtn.querySelector('.text').innerHTML = dataShowText;
11            var itemHeight = $(showhideContents).height();
12            var lineHeight = parseInt($(showhideContents).css("line-height"), 10);
13            var numberLine = Math.round(itemHeight / lineHeight);
14            if (numberLine > dataShow) {
15                showhideContents.style = `display:-webkit-box;-webkit-line-clamp:${dataShow};-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis; word-break: break-word;`;
16            } else {
17                $(dataBtn).hide();
18            }
19        });
20    }
21    const showhideToggles = document.querySelectorAll(".show-hide-btn");
22    if (showhideToggles) {
23        showhideToggles.forEach((item) => {
24            item.addEventListener("click", () => {
25                const dataShowText = item.parentElement.getAttribute(
26                    "data-show"
27                );
28                const dataHideText = item.parentElement.getAttribute(
29                    "data-hide"
30                );
31                const dataShow = item.parentElement.getAttribute(
32                    "data-init"
33                );
34                if (
35                    item.parentElement.querySelector(".show-hide-content").style
36                    .overflow == "hidden"
37                ) {
38                    item.parentElement.querySelector(
39                        ".show-hide-content"
40                    ).style = `display:-webkit-box;-webkit-line-clamp: 0;-webkit-box-orient: vertical;overflow: auto;text-overflow: ellipsis; word-break: break-word;`;
41                    item.querySelector(".text").innerHTML = dataHideText;
42                    item.classList.add("hide")
43                } else {
44                    item.parentElement.querySelector(
45                        ".show-hide-content"
46                    ).style = `display:-webkit-box;-webkit-line-clamp:${dataShow};-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis; word-break: break-word;`;
47                    item.querySelector(".text").innerHTML = dataShowText;
48                    item.classList.remove("hide")
49                }
50            });
51        });
52    }
53}