Discussion :

[leroilion94]

bonjour, voilà le code

https://codepen.io/anon/pen/pqVBaJ

comment, expliquer pour que vous puissiez me répondre .

j'aimerais comme sur votre forum index ouvrir et fermer une boite dialogue.

j'aimerais affiché par défaut l'icon-ouvert-forum avec la boite dialogue.

et quand je clique sur 'icon-ouvert-forum ça va fermé la boite dialogue et ça change 'icon-ouvert-forum par 'icon-fermer-forum

merci, de votre aide

[Toufik83]

si tu veux que tous les .description soient affichés par défaut au chargement de la page, tu n'as qu'a supprimer le display:none, et utilise ce bout de code.

Code :

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

1
2
3
4
5
6
 
$(document).ready(function(){
      $('.icon-ouvert-forum').click(function(){
          $(this).next('.description').slideToggle('fast');
      });      
});

[leroilion94]

merci,

pour changer icon-ouvert-forum par icon-fermer-forum

il faut mettre if et else afficher icon 1 ou icone 2

[Toufik83]

ah d'accord j'ai compris maintenant ce que tu cherches a faire,je ne savais pas que t'utilisais les entités Css du coup je n'ai pas vu les classes .icon-fermer-forum et .icon-ouvert-forum + les valeurs hexadécimales de la propriété content que tu a écrit me semblent pas bons, donc je suis tombé sur cette page et tout en bas, j'ai vu que le code correspondant a la flèche haut est \25b2 et celui de la flèche bas \25bc,
donc en modifiant un peu le code css, cela devient

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.icon-fermer-forum:before{
   content: "\25bc";
   font-size:10px;
   border:#000000 1px solid;
   float:right;
   cursor:pointer;
}
.icon-ouvert-forum:before
{
   content: "\25b2";
   font-size:10px;
   border:#000000 1px solid;
   float:right;
   cursor:pointer;
}

puis il ne reste qu'un peu de jQuery

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
$(document).ready(function(){
  $('.title').click(function(){
	if($(this).hasClass('icon-ouvert-forum')){
		$(this).removeClass('icon-ouvert-forum').addClass('icon-fermer-forum');
	}
	else if($(this).hasClass('icon-fermer-forum')){
		$(this).removeClass('icon-fermer-forum').addClass('icon-ouvert-forum');
	}
	$(this).next('.description').slideToggle('fast');
   });      
});

[leroilion94]

Merci, juste une petite chose

quand je mets la class title sur la page html

Code html :

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

<h2 class="title icon-ouvert-forum">Accueil</h2>

il ferme et il ouvre quand je clique sur h2, mais comment je dois faire pour évité de cliquer sur h2 mais seulement sur icon-ouvert-forum

j'ai testé

Code html :

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

<h2><span class="titre icon-ouvert-forum"></span>Accueil</h2>

mais, ca n'a pas fonctionner bien entendu j'ai changé la class jquery

en tout cas , je te remercie

[Toufik83]

mais comment je dois faire pour évité de cliquer sur h2 mais seulement sur icon-ouvert-forum

l'icone n'est pas une balise html ajouté au DOM, c'est un pseudo, donc jQuery ne peut pas le cibler directement.

si tu veux faire ça, garde le h2 avec la classe "title" et ajoute la classe "icon-ouvert-forum" au span.

Code html :

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

<h2 class="title" href="javascript:void(0)">Titre 1<span class="icon-ouvert-forum"></span></h2>

puis change le css

Code css :

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
 
span.icon-fermer-forum:before
{
	content: "\25bc";
	font-size:10px;
	border:#000000 1px solid;
	float:right;
	cursor:pointer;
}
 
span.icon-ouvert-forum:before
{
	content: "\25b2";
	font-size:10px;
	border:#000000 1px solid;
	float:right;
	cursor:pointer;
}

et enfin jQuery

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
$(document).ready(function(){
	$('.title span').click(function(e){
		if($(this).hasClass('icon-ouvert-forum')){
			$(this).removeClass('icon-ouvert-forum').addClass('icon-fermer-forum');
		}
		else if($(this).hasClass('icon-fermer-forum')){
			$(this).removeClass('icon-fermer-forum').addClass('icon-ouvert-forum');
		}
		$(this).parent().next('.description').slideToggle('fast');
	});      
});