Comment puis-je ajouter plus de signe moins ( - ) à la CSS de l'Accordéon

L'origine de l'accordéon est par Jasson Qasqant sur Codepen.

Voici ma version:
http://cdpn.io/kaHeo

Je voudrais ajouter un plus moins similaire à ceci:

http://codepen.io/auginator/pen/tCwDc

Quelqu'un peut s'il vous plaît aidez-moi, rien, j'ai essayé de travaillé et je n'ai jamais écrit JS avant, donc j'espérais copier les fonctions mais il ne fonctionne pas.

Tous testés suggestions de bienvenue. J'aurais besoin d'un exemple de travail que je ne sais pas comment la mettre le JS de sorte qu'il fonctionne avec le CSS et le HTML.

Merci!

Avez-vous écrit le js pour ouvrir et fermer les contenants?
cela a été résolu?

OriginalL'auteur user2660470 | 2013-08-13

  1. 8

    Ajouter une pseudo classe:

    content:"+";

    Et certains js comme suit:

    http://jsfiddle.net/Na5FY/2/

    OU

    suffit d'utiliser JQuerys de l'INTERFACE utilisateur de la méthode:

    $(".accordion").accordion({
    collapsible: true,
    active: parseInt(active_item),
    heightStyle: "content",
    icons: {
        "header": "ui-icon-plus",
        "activeHeader": "ui-icon-minus"
    }
});

    http://jsfiddle.net/4M6vH/3/

    Ce sont d'excellentes suggestions, je vous remercie, mais je cherchais un pour travailler avec mon code actuel, avez-vous des suggestion pour qui? J'ai essayé tout à l'aide de l'INTERFACE utilisateur de JQuery, mais il ne fonctionne pas, je suis probablement fait quelque chose de mal.
    Aussi Riskbreaker, où dois-je placer le "Contenu: "+"; " ?
    C'est parce que vous avez besoin pour obtenir de Jquery UI dans votre code. Je pense que c'est le meilleur moyen de faire un accordéon de travail de la façon dont vous le souhaitez. Allez l'obtenir: jqueryui.com/accordion
    Ohhh c'est bon, je vais essayer ça merci!
    Veuillez résoudre réponse si vous l'avez résolu

    OriginalL'auteur Riskbreaker

  2. 4

    http://jsfiddle.net/vkdzuqex/8/

    Il y a un peu de code, je fais sortir, à l'aide de tous les css pour générer cet élément, pour rendre le moins, il suffit de prendre de suite la :après...

    .plus {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  border: 1px solid #B4B4B4;
}
.plus:before {
  content: '';  
  width: 25px;
  height: 1px;
  border-top: 1px solid #B4B4B4;
  display: block;
  position: absolute;
  margin-top: 15px;
  margin-left: 3px;
}
.plus:after {
  content: '';  
  width: 1px;
  height: 25px;
  border-right: 1px solid #B4B4B4;
  display: block;
  position: absolute;
  margin-top: 3px;
  margin-left: 14px;
}

<div class="plus"></div>

    OriginalL'auteur Seth Henry Roberts