Hoe kan ik "Expand All" en "Collapse All" implementeren met de jQuery-plug-in van Darren Ingram voor eenvoudig inklapbaar paneel?

Ik ben op zoek naar een manier om "Alles uitvouwen" en "Alles samenvouwen" -knoppen te implementeren voor gebruik met de jQuery-plug-in van Simple Plug-in van eenvoudig Darren Ingram.

http://www.darreningram.net/pages/examples/jQuery/CollapsiblePanelPlugin.aspx

Weet iemand hoe te evalueren of een wordt uitgebreid of samengevouwen en op basis van dat antwoord de ineenstorting of uitbreiding veroorzaken? Ik lijkt hier geen grip op te kunnen krijgen.

Bedankt,

Arn

1
@moonbear. Ik heb de code geprobeerd en gebruik de plug-in in een toepassing.
toegevoegd de auteur Arnold, de bron
Heb je de uitgebreide voorbeeldcode op de pagina geprobeerd?
toegevoegd de auteur Dennis G, de bron

3 antwoord

Dit schakelt alle items in:

$(".collapsibleContainerContent").slideToggle();

Dit toont alle items:

$(".collapsibleContainerContent").slideDown();

Dit zal alle items verbergen:

$(".collapsibleContainerContent").slideUp();
1
toegevoegd
Bedankt, ik zal dit morgen proberen.
toegevoegd de auteur Arnold, de bron
Nee, dit werkt niet voor mij.
toegevoegd de auteur Arnold, de bron

@Joseph en @rsan. Hoewel ik de plug-in leuk vind en redelijk gemakkelijk kon implementeren, ontsnapt de manier om de vereiste functies "Alles uitvouwen" en "Alles samenvouwen" toe te voegen en ik heb geen tijd om door de code te zoeken voor het antwoord. Ik heb gekozen voor een eenvoudigere aanpak waardoor ik verder kan. Ik vind de sjabloon gevonden op LightCMS .

    jQuery(document).ready(function ($) {
        $('.collapsible').hover(
        function() {
            $(this).css('text-decoration', 'underline');
        },
        function() {
            $(this).css('text-decoration', 'none');
        });

        $('.collapsible').next().hide();
        $('.collapsible').click(function() {
            $(this).next().slideToggle();
        }); 
    });       

Door het simpel te houden, kan ik schrijven:

    $("#idSlideCollapsibleBlue").slideUp('slow');

waar idSlideCollapsibleBlue de ID is van een div die zich net onder een h3 bevindt, zoals zo.

    

Telecom: Add New Users

<div id="idSlideCollapsibleBlue" title="Telecom: Add New Users">

Thanks for looking into thiis. I appreciate it.

-Arnold

0
toegevoegd

Mmmm, heb je geprobeerd:

$('#COLLAPSEALL').click(function(){
     $('.collapsibleContainerContent').hide(slow);
});

$('#EXPANDALL').click(function(){
     $('.collapsibleContainerContent').show(slow);
});

Als je op het darrens-paneel klikt, is het enige verschil dat ik zie dat de weergave-eigenschap is gewijzigd van block in none, dus showen en verbergen zou moeten werken.

0
toegevoegd
Bedankt, ik zal dit morgen proberen. Trouwens, ik heb drie van deze inklapbare panelen op een pagina.
toegevoegd de auteur Arnold, de bron
Nee, dit werkt niet voor mij.
toegevoegd de auteur Arnold, de bron