Création d'un contenu Accordéon avec jQuery

**younes2727** · 16/12/2017, 22h42

Bonsoir à tous

j'ai 3 <aside > ,le probleme c'est comme suit :

je clique sur "read-more" pour afficher plus de contenu ==> dans ce cas ça marche, et le bouton devient "read less" .
Mails lorsque je passe au 2 <aside> et je click sur "read more" ,là il y aura un affichage de contenu caché mais le bouton reste "reade-more" au lieu de "read -less "

aussi j'ai essayé d'appliquer un slidUp() sur les autres <aside> lorsque un de ces dernier est ouvert , là aussi je ne suis pas arrivé à le faire
voici le code :

html+css

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
 
<!DOCTYPE html>
<html>
<head>
	<title>Collapse</title>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="js.js"></script>
 
	<style type="text/css">
        @supports (grid-area: auto) {
                h1,h2
                {text-align: center;}
 
                article 
                {
                        margin: 30px;
                        display: grid;
                        grid-template-columns: repeat(3,1fr);
                        grid-gap: 1em;
                }
 
 
                .accordiant
                {
                        display: grid;
                }
 
                .img
                {
                        border: 3px solid #F0B27A;
                        -moz-border-radius: 50px;
                        -webkit-border-radius: 50px;
                        border-radius: 50px;
                        width: 200px;
                        height: 200px;
                        background-color: #ABEBC6  ;
                        margin: 0 auto;
                } 
 
 
                .more 
                {
                        cursor: pointer;
                        color: #00a5d5;
                        font-weight: 600;
                        user-select: none;
                        -webkit-user-select:none;
                        -moz-user-select:none;
                }
 
                .more:hover 
                {
                        text-decoration: underline;
                        color: #555;
                }
 
        }
 
</style>
 
 
</head>
<body>
 
 
	<header>
		<h1> Expanding Panel</h1>
	</header>
 
	<article class="accordiant">
 
 
		<aside>
			<div class="img"></div>
			<h2>Title 1</h2>
 
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor</p>
 
			<p class="expanding_panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				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.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				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.</p>
			<span class="more"> Read More</span>
 
		</aside>
 
		<aside>
			<div class="img"></div>
			<h2>Title 2</h2>
 
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor</p>
 
			<p class="expanding_panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				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.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				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.</p>
			<span class="more"> Read More</span>
 
		</aside>
 
		<aside>
			<div class="img"></div>
			<h2>Title 3</h2>
 
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor</p>
 
			<p class="expanding_panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				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.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				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.</p>
			<span class="more"> Read More</span>
 
		</aside>
 
	</article>
</body>
</html>

jQuery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
/* jQuery Document*/
$(document).ready(function()
{
 
 
  var article= $(".accordiant");
  article.find(".expanding_panel").hide();
 
 
  $(".more").on("click",function(){
 
   var txt = $(".expanding_panel").is(':visible') ? 'Read More' : 'Read Less';
   console.log(txt);
   $(this).text(txt).prev().slideToggle()/*.siblings(".expanding_panel:visible").slideUp()*/;
});
 
 
 
});

voici aussi le code sur codepen

https://codepen.io/FreeLance27/pen/eypLdM
Merci d'avance.

Invité · 17/12/2017, 09h54

Bonjour,

une solution :

Code jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
  $(".more").on("click", function() {
    var this_aside = $(this).parent();
    // on ferme les autres
    $('.accordiant aside').not(this_aside).find(".expanding_panel").slideUp();
    $('.accordiant aside').not(this_aside).find(".more").text("Read More");
    // on ouvre / ferme celui concerné
    var txt = $(this).prev(".expanding_panel").is(":visible") ? "Read More" : "Read Less";
    console.log(txt);
    $(this)
      .text(txt)
      .prev(".expanding_panel").slideToggle();
  });

**younes2727** · 17/12/2017, 12h13

Merci jreaux62

C'est une très bonne solution (j'ai oublié l'existence de not dans jQuery)

Création d'un contenu Accordéon avec jQuery

jQuery

Discussions similaires

Partager

Partager