Lire PLus__Lire Moins__Traduction jQuery en Javascript Pur

Bonjour, Bonsoir, Messieurs, Mesdames,

J'ai un petit souci de conversion d'un code jQuery en Pur Javascript via une video youtube (= pour ma pratique perso) : https://www.youtube.com/watch?v=uzSk...KI0w&index=456

Voici le code HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!doctype html>
<html>
 
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="MultipleReadMoreReadLess.css">
    <title>Multiple Read More_Read Less Button With Javascript</title>
</head>
 
<body>
    <h1>Multiple Read More_Read Less Button With Javascript</h1>
 
    <section>
        <div class="post">
            <h2>Post title 01</h2>
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<span class="more"> quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
            </span>
            <button class="read">Read more</button>
        </div>
 
        <div class="post">
            <h2>Post title 02</h2>
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<span class="more"> quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
            </span>
            <button class="read">Read more</button>
        </div>
 
        <div class="post">
            <h2>Post title 03</h2>
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<span class="more"> quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
            </span>
            <button class="read">Read more</button>
        </div>
    </section>
 
    <script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
    <script src="MultipleReadMoreReadLess.js"></script>
</body>
 
</html>

Voici le code CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
body {
    background-color: #2a85e3;
    padding: 0;
    margin: 25px;
    margin-top: 50px;
}
 
section {
    padding: 20px;
}
 
.post {
    color: #e5e5e5;
    text-align: justify;
    font-size: 20px;
    line-height: 25px;
    font-family: sans-serif;
}
.post:not(:last-child) {
    margin-bottom: 30px;
}
h1 {
    margin: 0 0 15px 0;
    color: #ff0066;
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 5px;
}
 
.more {
    display: none;
}
 
button {
    display: block;
    background-color: #ff0066;
    color: #fff;
    border: none;
    outline: none;
    font-size: 30px;
    /* padding: Haut-Bas px Left-Right px */
    padding: 5px 20px;
    text-transform: full-width;
}

Voici le code jQuery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Code jQuery
$(document).ready(function() {
    $('.read').click(function() {
        // prev() = .previousElementSibling
        //toggle() = show or hide elements
        $(this).prev().toggle();
        console.log($(this).prev());
        // .siblings = get children de chaque element 
        $(this).siblings('.dots').toggle();
        console.log($(this).siblings('.dots'));
 
        if ($(this).text() === 'Read more') {
            $(this).text('Read less');
        } else {
            $(this).text('Read more');
        }
    })
})

Je précise que ces trois codes proviennent de la video youtube d'en haut .

J'ai voulu convertir le code jQuery en code Pur Javascript MAIS le display NE MARCHE PAS alors que dans la console, il m'affiche bien le display :(

Voici le code Pur Javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const read = document.querySelectorAll('.read');
const more = document.querySelectorAll('.more');
 
for (let i = 0; i < read.length; i++) {
    read[i].addEventListener('click', function() {
        this.previousElementSibling;
        console.log('\n')
        console.log(this.previousElementSibling);
 
        if (this.innerHTML === 'Read more') {
            this.previousElementSibling.display = 'inline';
            console.log(this.previousElementSibling.display);
            this.innerHTML = 'Read less';
        } else {
            this.previousElementSibling.display = 'none';
            console.log(this.previousElementSibling.display);
            this.innerHTML = 'Read more';
        }    
    })
}

DONC, je me répéte un peu, je voudrais afficher le texte caché avec Javascript traduit à partir du code jQuery, lorsque l'on clique sur "Read more" merci