2
votes

Comment ouvrir un seul accordéon à la fois

<ul class="accordion">
        <li>
    <button class="accordion-control">Something</button>
    <div class="accordion-panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
        </li>

        <li>
    <button class="accordion-control">Something</button>
    <div class="accordion-panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
        </li>
</ul>

javascript jquery html css accordion

5 commentaires

Est-ce dans l'interface utilisateur jQuery ou dans une autre bibliothèque? Veuillez fournir un exemple minimal et reproductible: stackoverflow.com/help/minimal-reproducible-example

jsfiddle.net/DkHyd stackoverflow.com/questions/3479447/...

Ceci est simple jquery, pas une autre bibliothèque

Le comportement par défaut de l'accordéon fait ce que vous demandez, non? Voir l'exemple en bas ici: api.jqueryui.com/accordion/#entry-examples Lorsqu'un panneau replié est cliqué, celui actuellement ouvert se ferme lorsque le panneau cliqué s'ouvre. Si ce n'est pas ce que vous voulez, vous devez décrire le comportement souhaité avec plus de précision.

Veuillez inclure votre CSS

4 Réponses :

-1
votes

ce que vous pourriez probablement faire est de désactiver tous vos accordéons et à chaque fois que l'utilisateur clique sur l'un d'eux, activez le suivant.

Vous pouvez voir un exemple ici, espérons que cela résoudra votre problème.

J'ai également fourni un extrait de code pour vous aider avec l'exemple précédent.

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="x" class="form-control" disabled>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<button class="accordion">click me</button>

Ce que vous essayez de réaliser est également possible avec le framework bootstrap d'une manière simple que vous pouvez voir en cliquant ici . Bootstrap utilise également jquery, donc si vous avez besoin de personnaliser quoi que ce soit, c'est également possible. Pour le télécharger, vous pouvez cliquer ici . Veuillez noter que pour démarrer le travail de code, vous devez le télécharger et écrire le bon chemin sur la tête de votre html ou ajouter ces scripts:

// Disable #x
$('.accordion').on('click', function(e){
    e.preventDefault();
    $(this)
    .next('.accordion-panel')
    .not(':animated')
    .slideToggle();
    $( "#x" ).prop( "disabled", false );
});

1 commentaires

j'ai ajouté mon propre fichier html s'il vous plaît jeter un oeil

1
votes

J'ai réécrit votre exemple d'entrée avec le balisage d'interface utilisateur jQuery prescrit , comme documenté ici: https://api.jqueryui.com/accordion/#entry-examples

Votre exemple de code dans votre question ne correspond pas de très près au balisage correct.

Comme vous pouvez le voir dans l'exemple de travail ci-dessous, un seul panneau est ouvert à un moment donné, ce que vous avez signalé comme le comportement souhaité. Comme mentionné dans mon commentaire ci-dessus, c'est également le comportement par défaut .

Exécutez l'extrait ci-dessous pour voir une version fonctionnelle en action.

<link href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="accordion">
  <h3>Something 1</h3>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <h3>Something 2</h3>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

$("#accordion").accordion();

1 commentaires

Ils n'utilisent pas jqueryUI

2
votes

Fermez-les tous et ouvrez celui sur lequel l'utilisateur a cliqué:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="accordion">
        <li>
    <button class="accordion-control">Something</button>
    <div class="accordion-panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
        </li>

        <li>
    <button class="accordion-control">Something</button>
    <div class="accordion-panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
        </li>
</ul>

$('.accordion-control').click(function(){
   $(".accordion-panel").slideUp();
   $(this).next('.accordion-panel').slideToggle();
});

Ce lien SO: JS slideToggle close other open divs

2 commentaires

Vous devez l'ajuster pour qu'il n'applique slideUp qu'aux panneaux de l'accordéon actuel, au cas où il y aurait plusieurs accordéons sur une page.

@JonP Je pense que c'est un peu hors de portée de ce qu'OP a demandé à l'origine. Personnellement, je changerais de classe et n'utiliserais pas du tout JQ pour cela (:

0
votes

Vous devez fermer le panneau ouvert.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="accordion">
  <li>
    <button class="accordion-control">Something</button>
    <div class="accordion-panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </li>

  <li>
    <button class="accordion-control">Something</button>
    <div class="accordion-panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </li>
</ul>

.accordion-panel {
  display: none;
}

$('.accordion').on('click', '.accordion-control', function(e) {
  e.preventDefault();
  //Close Open panel
  $(this).closest(".accordion").find(".accordion-panel:visible").slideToggle();

  $(this)
    .next('.accordion-panel')
    .not(':animated')
    .slideToggle();
});

0 commentaires