Discussion :

[dominos]

Bonjour,

Depuis hier, j'apprend l'accordéon, c'est un instrument très amusant.

Par exemple, dans la partie droite de chaque menu je cherche à faire alterner deux icones bootstrap avec un effet d'animation,
l'exemple ci-dessous fonctionne très bien sur Chrome/FF/Opéra mais pas sur IE/Safari.

Petite précision, j'utilise exactement le même principe dans un autre contexte sur des images et cela fonctionne,
comme si le content: n'était pas reconnu...

Tournant en rond, auriez-vous une idée du problème ?

Code CSS/Bootstrap :

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
.accordion-icon [data-toggle="collapse"]:after
{
    font-family: 'Glyphicons Halflings';
    content: "\2212"; /* "-" icon */
    float: right;
    color: #b0c5d8;
    font-size: 16px;
    line-height: 28px;
 
    /* Animation */
	transition: all 700ms ease;
	-webkit-transition: all 700ms ease; /* Compatibilité : Safari */
 
 }
.accordion-icon [data-toggle="collapse"].collapsed:after
{
    font-family: 'Glyphicons Halflings';
    content: "\2b"; /* "+" icon */
    float: right;
    color: #fff;
    font-size: 16px;
    line-height: 30px;
 
    /* Animation */
	transition: all 700ms ease;
	-webkit-transition: all 700ms ease; /* Compatibilité : Safari */
    /* Rotation */ 
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg); /* Compatibilité : Safari */
 
}

Vous remerciant par avant pour vos idées.

[JefReb]

Ben lorsque l'on est pas wordpress, bootstrap ou autre c'est un peu maigre en code html et css pour pouvoir aider.
Donc sans un peu plus de code difficile de comprendre ... sinon passer à la flute ou au pipeau

[dominos]

Merci pour la réponse, difficile de m'aider si vous ne posséder pas d'accordéon...

https://www.developpez.net/forums/d1...rdeon-niveaux/

[JefReb]

Même avec tout ça, il manque pas mal de css et pour faire un petit ban de test et essayer de comprendre, c'est un peu léger.
Bon, sans bonne volonté pour montrer un code testable et concis, tant pis.
Peut être un participant aura du temps a y consacrer ...
je reste au pipeau!

[dominos]

Il ne manque absolument rien au CSS, c'est du Bootstrap, il faut juste ajouter le collapsed dans à la ligne :

Code :

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

class="panel-heading collapsed

La fonction slideToggle() ne fait rien d'autre qu'un simple slideToggle().

Code :

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

1
2
3
4
function slideToggle(id)
{ 
    $('#'+id).slideToggle(500);
}

Si vous ne maitrisez pas le sujet, s'il vous plait, même si cela part d'un bon sentiment, merci de ne pas polluer inutilement ce message.
Néanmoins, si ce sujet vous intéresse quand même, voici quelques exemples compatibles Chrome/Safari/IE/FF/Opéra trouvés hier soir :

https://plnkr.co/edit/3ItOoCFZQlicu7iCcGFL?p=preview
http://jsfiddle.net/koala_dev/3v2egwfs/7/
http://css3.bradshawenterprises.com/accordions/