web-dev-qa-db-fra.com

jQuery Simple Collapsible Div?

Je cherche le code correct, simple et petit pour effectuer les tâches suivantes:

  • Cliquez sur l'élément avec la classe qui lui est appliquée.

  • DIV.CLASS - Qui développe et affiche le contenu masqué. (slideDown - Toggle)

  • DIV.CLASS - Ce qui réduit et masque le contenu précédemment affiché. (slideUp - Toggle)

J'ai créé un jsFiddle ici: http://jsfiddle.net/Q4PUw/1/

Donc, pour être vague et facile, j'ai besoin de savoir comment faire en sorte qu'une CLASSE DIV devienne cachée et visible une fois qu'un élément de la même page se voit appliquer une CLASSE, dans laquelle l'activation et la désactivation du contenu HTML masqué et visible. Et j'ai besoin que ça soit caché par défaut.

J'ai regardé partout sur Internet et n'ai trouvé que des scripts très complexes, mais rien de simple. J'ai trouvé des simples accordians ... Mais ceux-là ne se ferment jamais, ils en ouvrent un autre.

Merci à tous pour l'aide et j'espère que je pourrai pouvoir répondre à cette même question pour beaucoup d'autres personnes ...

Note: Je connais très peu JavaScript et/ou même jQuery.

javascriptjqueryhtmlexpandcollapse
24
Aaron Brewer
$('.expand-one').click(function(){
    $('.content-one').slideToggle('slow');
});

Démo: http://jsfiddle.net/Q4PUw/2/

65
AlienWebguy

Je regardais cela et je voulais une div pliable qui avait déjà été conçue pour moi. Puis j'ai compris que je voulais un accordéon à volet unique. 

<div id="collapse">
   <h3>Collapse and Expand</h3>
   <div>Content</div>
</div>
<script>
$( "#collapse" ).accordion({
    collapsible: true,
    active: false
});
</script>

http://jsfiddle.net/MB4ch/1/

8
Biff MaGriff

Je voulais faire cela avec plusieurs divs, chacun avec son propre déclencheur. S'appuyant sur la réponse d'AlienWebguy ci-dessus:

HTML

<div>
    <p class="expand" id="expand-1">more 1...</p>
</div>
<div class="expandable" id="expandable-1">
    <p>1. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
<div>
    <p class="expand" id="expand-2">more 2...</p>
</div>
<div class="expandable" id="expandable-2">
    <p>2. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>

Javascript

$('.expand').click(function(){
    target_num = $(this).attr('id').split('-')[1];
    content_id = '#expandable-'.concat(target_num);
    $(content_id).slideToggle('fast');
});

CSS

.expand {
    font-weight: bold;
    font-style: italic;
    font-size: 12px;
    cursor: pointer;
}
.expandable {
    display:none;
}
div {
    margin: 10px;
}

https://jsfiddle.net/Q4PUw/3767/

2
Tom Milligan

Mauvaise idée d'utiliser un accordéon. Mieux vaut créer votre propre bloc compressible.

Exemple:

function InitSpoilBlock(idClicked)
    {
        $(idClicked).on('click', function(e){
            var textArray = ['blind','slide'];//here you can add other effects

            var randomEffect = textArray[Math.floor(Math.random()*textArray.length)];

            $(e.target).parent().children(".HiderPanel").toggle(randomEffect);
        });
    }

alors quand vous écrivez un tel HTML:

<div class="HiderContainer">
    <a href="#" class="Hider">More</a>
    <div class="HiderPanel">
        Spoiled block of html
    </div>
</div>

et après le chargement de la page, vous appellerez

InitSpoilBlock('.Hider');

tous les blocs pourront être réduits et cachés avec une animation aléatoire. Ou vous pouvez également utiliser une animation exacte.

0
Andrew