jQuery Accordion changer de police génial icône à la classe, cliquez sur

J'ai une question à propos d'un simple jQuery accordion j'ai trouvé.

J'aimerais utiliser la Police Impressionnant icônes pour indiquer l'actif/inactif de l'état avec des icônes plus et moins.
Dans mon JSFiddle vous voyez l'accordéon titres avec des icônes plus. Lorsque vous cliquez sur un titre de la "fa" plus les besoins de la classe "fa-moins".

J'ai déjà fait quelques tests avec ajouter et removeClass, mais je ne pouvais pas le faire fonctionner. Je suis vraiment un jQuery/javascript noob! Espérons que vous les gars peuvent m'aider :-).

jQuery('.accordion dt').click(function() {

    jQuery('.accordion dt').removeClass('active');
    jQuery('.accordion_content').slideUp('normal');

    if(jQuery(this).next().is(':hidden') == true) {
        jQuery(this).addClass('active');
        jQuery(this).next().slideDown('normal');
    }
});

jQuery('.accordion_content').hide();

http://jsfiddle.net/XrGU8/

désolé! Je suis nouveau ici 🙂

OriginalL'auteur Patrick Heiloo | 2014-01-16

Pourquoi ne pas la chaîne de votre code au lieu de répéter:

jQuery('.accordion dt').click(function() {
    jQuery(this).find('i').toggleClass('fa-plus fa-minus')
                .closest('dt').next().slideToggle()
                .siblings('.accordion_content').slideUp();
});

jQuery('.accordion_content').hide();

Mis À Jour Le Violon

Mise à jour:

Final de votre code devrait ressembler à ceci:

jQuery('.accordion dt').click(function() {
    jQuery(this).toggleClass('active').find('i').toggleClass('fa-plus fa-minus')
           .closest('dt').siblings('dt')
           .removeClass('active').find('i')
           .removeClass('fa-minus').addClass('fa-plus');

    jQuery(this).next('.accordion_content').slideToggle()
                .siblings('.accordion_content').slideUp();  
});

jQuery('.accordion_content').hide();

Mis À Jour Le Violon

+1 pour le simplifier.
+1 pour simplifing il en effet! Mais lorsque vous cliquez sur un onglet inactif le moins icône besoins pour remettre à plus et le nouveau active, on doit être moins. Désolé pour mon mauvais anglais, je suis hollandais.
Vérifier mon code mis à jour 🙂
oui vous y êtes presque! Lorsque vous cliquez sur un onglet actif de la refermer, mais la classe active sur le titre ne sera pas supprimée (elle reste active).
Je ne comprends pas ce que vous signifie, pouvez-vous nous en dire un peu plus? Je ne vois pas tous les actifs de la classe de rester après la fermeture de l'onglet.

OriginalL'auteur Felix

jQuery('.accordion dt').click(function() {
    $(this).find('i').toggleClass('fa-plus fa-minus') //add this line
    jQuery('.accordion dt').removeClass('active');
    jQuery('.accordion_content').slideUp('normal');

    if(jQuery(this).next().is(':hidden') == true) {
        jQuery(this).addClass('active');
        jQuery(this).next().slideDown('normal');
    }

});

jQuery('.accordion_content').hide();

Démo

jQuery('.accordion dt').click(function() {
    $('.accordion dt').find('i').removeClass('fa-minus'); //Hides the minus sign on click
    $(this).find('i').addClass('fa-plus fa-minus'); //add this line
    jQuery('.accordion dt').removeClass('active');
    jQuery('.accordion_content').slideUp('normal');

    if(jQuery(this).next().is(':hidden') == true) {
        jQuery(this).addClass('active');
        jQuery(this).next().slideDown('normal');
    }

});

jQuery('.accordion_content').hide();

Démo supprime le signe moins lorsque les autres onglets sont cliqués

J'ai mis à jour mon violon avec votre code, mais regardez ce qui se passe avec les autres lorsque vous cliquez sur un autre titre.
J'ai mis à jour sa réponse avec un code pour accueillir.
génial! C'est ce que je cherchais. Merci pour votre aide rapide!
Pas de problème de contrainte, bonne chance!
Cheers @JoshPowell 😉

OriginalL'auteur dcodesmith

C'est une bonne solution, mais lorsque vous utilisez le premier onglet ouvert, il devient un peu bordélique. Mais vous pouvez faire ce travail, uniquement à l'aide de css. Je suis en utilisant bootstrap de l'accordéon et de la police génial et j'ai créé icône personnalisée avec elle de sorte que lorsque l'onglet est fermé, il obtient la fermeture de l'icône et quand il est ouvert, l'autre icône. voici le code html:

<div class="accordion-group">
 <div class="accordion-heading">
   <a class="accordion-toggle accordion-icon-arrow-circle" href="#collapseOne" data-   toggle="collapse" data-parent="#accordion2">
    <span class="accordion-icon"></span> 
   Accordion Title
   </a>
 </div>
 <div id="collapseOne" class="accordion-body collapse in">
  <div class="accordion-inner">Here will be the accordion text</div>
 </div>
</div>

et ici-bas est le style css:

.accordion-icon-arrow-circle {
   position:relative
}

.accordion-icon {
  position: absolute;
  left: 7px;
  top: 7px;
  display: block;
  width: 20px;
  height: 20px;
  line-height: 21px;
  text-align: center;
  font-size: 14px;
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  *margin-right: .3em;
}
.accordion-icon-arrow-circle .accordion-icon:before { 
  content: "\f0ab"; 
}
.accordion-icon-arrow-circle.collapsed .accordion-icon:before { 
  content: "\f0a9"; 
}

j'ai utilisé pour ajouter de la classe .accordéon-icon-arrow-cercle à accorion titre et le .s'est effondré classe est appelée par bootstrap.js quand l'accordéon titre est cliqué.

Merci, pouvez vous s'il vous plaît faire il s'est effondré par défaut?
J'ai compris comment faire, il s'est effondré par défaut, vous devez ajouter "s'est effondré" classe à l'élément qui tient "accordéon-icon-arrow-cercle"/

OriginalL'auteur emilushi

Vous devez vous connecter pour publier un commentaire.