Bootstrap accordéon seulement auto-effondrement d'un panneau

J'ai été de me gratter la tête sur ce pour les 2 dernières heures. J'ai un accordéon avec deux panneaux. Je veux le premier groupe à être développée par défaut. Lors de l'effondrement du panneau d'en-tête est cliqué, je veux que le panneau d'élargir et d'autre de l'effondrement. Il ne fonctionne que dans certaines situations, pour la deuxième panneau.

Ici est un JSFiddle.

Voici mon balisage:

<div id="proposalAccordian" class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#proposalAccordian" href="#collapseContact">Contact</a>
            </h4>
        </div>
        <div id="collapseContact" class="panel-collapse collapse in">
            <div class="panel-body">
                @Html.Partial("_ContactPanel")
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#proposalAccordion" href="#collapseProposal">Proposal</a>
            </h4>
        </div>
        <div id="collapseProposal" class="panel-collapse collapse">
            <div class="panel-body">
                @Html.Partial("_ProposalPanel")
            </div>
        </div>
    </div>
</div>

Je suis en utilisant Bootstrap v3.1.1 et jQuery v1.10.4.

Il y a quelque chose de mal avec le violon de ressources. Voici votre code dans un autre violon: jsfiddle.net/isherwood/MMxMn/2
La différence dans votre violon et de la mine semble que je suis en utilisant jQuery 1.9.1.

OriginalL'auteur im1dermike | 2014-05-30

  1. 11

    Vous devez ajouter data-parent="#proposalAccordian"

    <a data-toggle="collapse" data-parent="#proposalAccordian"  href="#collapseProposal">Proposal</a>

    Voir violon: http://jsfiddle.net/nicos/JKqGc/

    Pendant que vous êtes correctement qu'il y a une valeur d'ID de décalage dans le code, il ne semble pas affecter la fonctionnalité. jsfiddle.net/isherwood/47n94/3
    Voir tripoter dans edition.
    Vous avez jQuery 1.11 dans votre violon. 🙂
    Voici votre violon avec v1.10. Il ne fonctionne pas sous Chrome ou IE11. jsfiddle.net/isherwood/JKqGc/1
    De travail dans chrome et safari ma fin, l'homme. bizarre.

    OriginalL'auteur Panoply

  2. 0
    Strangely, your code works on jQuery 1.9.x:

    http://jsfiddle.net/isherwood/MMxMn/5

    and 1.11.x:

    http://jsfiddle.net/isherwood/MMxMn/4

    but not 1.10.x:

    http://jsfiddle.net/isherwood/MMxMn/8

    Noter que j'ai une normalisation de la graphie de "accordéon" pour fixer l'accordéon fonctionnalité.

    Il travaille sur 1.10.x l'homme.
    Pas pour moi en Chrome ou IE11. La page des secousses comme si je clique sur un point d'ancrage.
    Je vois que ça fonctionne dans Firefox.

    OriginalL'auteur isherwood

  3. 0
    <div id="accordion" role="tablist" aria-multiselectable="true">
    All panels inside this..
</div>

    Dans notre cas, le problème était dans une structure HTML que nous avions à l'intérieur de la boucle foreach. La solution est d'utiliser un seul accordéon pour tous les panneaux.

    OriginalL'auteur Ravi Teja Tata

  4. 0

    Essayer cette

    var $collapse = $('.collapse');
$collapse.collapse().on('show.bs.collapse', function() {
    $collapse.collapse('hide');
});

    OriginalL'auteur Husain Al Faraj