Archief - JQuery Accordion

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
c

crimineels

Legacy Member
Yo,

Ik gebruik momenteel de JQuery accordion
Ik heb 2 afzonderlijke accordions die afzonderlijk open en dicht geklapt kunnen worden. dit door gewoon 2 afzonderlijke div's te maken.(div id= "accordion" & div id="accordion2")
Nu zou ik graag willen dat wanneer ik tab 1 openklik in de eerste accordion, dat tab 2 ook openklikt...

Iemand een idee hoe ik dit zou kunnen doen. (uiteraard met de beperking dat accordion 1 en accordion 2 evenveel tab's moeten hebben)

Code: 
 // Accordion
            $("#accordion").accordion({
                header: "h3",
                collapsible: true,
                autoHeight: false
            });

            $("#accordion2").accordion({
                header: "h3",
                collapsible: true,
                autoHeight: false
            });

Alvast bedankt!:bow:
S

Scissor

Legacy Member
Ben niet vertrouwd met de plugin maar moet vrij simpel te doen zijn lijkt me. Dus je accordeon opent met een click-event? Gewoon is kijken in je code van je accordeon en dat event linken aan je 2e accordeon? Post anders eens je voorbeeld op fiddle.
D

Dastardly

Legacy Member
accordeon is niet gemaakt om twee panels open te hebben. al zeker niet die standaard versie.

gebruik beter een zelfgeschreven functie. vb: Edit this Fiddle - jsFiddle

Staan twee functie in. eentje met css van de originele accordeon van jquery voorzien en eentje zonder (kan je zelf wat met css knoeien).
c

crimineels

Legacy Member
SideShow zei:
$("#accordion").find("h3").click(function() {
var me = this;
$("#accordion2").find("h3").eq($(me).index(me)).click();
})

niet getest, maar dit is zo ongeveer een manier waarop je kan tewerk gaan

.index() – jQuery API
.eq() – jQuery API
Klik om te vergroten...

Bedankt voor de reactie!
Maar helaas... Met deze code staat alles gewoon open, je kan ook niets meer sluiten ofzo...
Ik begrijp wel hoe je te werk wilt gaan ==> Als er op accordion1 geklikt wordt, uit code klikken op accordion2, op dezelfde positie. Dat is ook wat ie moet doen. :-)
Ken der helaas echt helemaal niks van dus kan het zelf ni oplossen... :help:
c

crimineels

Legacy Member
Dastardly zei:
accordeon is niet gemaakt om twee panels open te hebben. al zeker niet die standaard versie.

gebruik beter een zelfgeschreven functie. vb: Edit this Fiddle - jsFiddle

Staan twee functie in. eentje met css van de originele accordeon van jquery voorzien en eentje zonder (kan je zelf wat met css knoeien).
Klik om te vergroten...

Thx! Als ik er niet uit kom zal ik deze eens wat beter bestuderen... Ik heb echter de accordeon gebruikt omdat dan de rest vanzelf dichtklapt.

Accordion is niet gemaakt om 2 panels open te hebben ==> Helemaal mee eens, dat lees je overal. Maar ik heb 2 accordion's op 1 pagina. Je kan dus perfect in accordion1 & in accordion2 iets open hebben staan.
Enkel de code om accordion2, accordion1 te laten volgen mis ik nog :-)
D

Dastardly

Legacy Member
crimineels zei:
Thx! Als ik er niet uit kom zal ik deze eens wat beter bestuderen... Ik heb echter de accordeon gebruikt omdat dan de rest vanzelf dichtklapt.

Accordion is niet gemaakt om 2 panels open te hebben ==> Helemaal mee eens, dat lees je overal. Maar ik heb 2 accordion's op 1 pagina. Je kan dus perfect in accordion1 & in accordion2 iets open hebben staan.
Enkel de code om accordion2, accordion1 te laten volgen mis ik nog :-)
Klik om te vergroten...

sorry, had er volledig scheel over gekeken. dacht dat je twee pannels in één accordeon open wilde ipv feitelijk twee accordeons linken.

Edit this Fiddle - jsFiddle

heb het daar even snel ineen gestoken via de event van die plugin zelf. je kan eventueel change gebruiken ipv changestart als je het niet erg vind dat hij de andere accordeon pas opent of sluit wanneer de originele animatie afgelopen is (dan kan je alles van isUpdating weglaten).

het kan vermoedelijk nog iets properder geschreven worden, maar 't was een drukke dag en ik ben moe :) je moet je in ieder geval al geen zorgen maken over het feit dat beide accordeons evenveel items moeten hebben. als je er een wil open doen die in de ander niet bestaat gaat hij ze gewoon sluiten (zie vb met 3e item in eerste accordeon).
c

crimineels

Legacy Member
Dastardly zei:
sorry, had er volledig scheel over gekeken. dacht dat je twee pannels in één accordeon open wilde ipv feitelijk twee accordeons linken.

Edit this Fiddle - jsFiddle

heb het daar even snel ineen gestoken via de event van die plugin zelf. je kan eventueel change gebruiken ipv changestart als je het niet erg vind dat hij de andere accordeon pas opent of sluit wanneer de originele animatie afgelopen is (dan kan je alles van isUpdating weglaten).

het kan vermoedelijk nog iets properder geschreven worden, maar 't was een drukke dag en ik ben moe :) je moet je in ieder geval al geen zorgen maken over het feit dat beide accordeons evenveel items moeten hebben. als je er een wil open doen die in de ander niet bestaat gaat hij ze gewoon sluiten (zie vb met 3e item in eerste accordeon).
Klik om te vergroten...

Geweldig, Bedankt!
:niceone::bow:
c

crimineels

Legacy Member
Nog een vraagje in verband met de JQuery accordion.

Is het mogelijk om bij een postback(klikken op een knop), de index van de accordion te behouden? (indien 3 openstond, moet die blijven openstaan). Standaard opent telkens weer de 1ste tab...

Ik denk dat deze code evt. gebruikt kan worden, maar ik geraak er echt niet uit:
Code: 
Get or set the active option, after init.
//getter
var active = $( ".selector" ).accordion( "option", "active" );
//setter
$( ".selector" ).accordion( "option", "active", 2 );
D

Dastardly

Legacy Member
via bbq voor jquery kan je dat, maar da's misschien al wat te uitgebreid.

gewoon via window.location.hash = "index die je wil behouden" lukt het normaal gezien ook. gewoon een functietje maken die de hash uitleest en corresponderende accordeon laat zien bij 't laden.
c

crimineels

Legacy Member
Dastardly zei:
via bbq voor jquery kan je dat, maar da's misschien al wat te uitgebreid.

gewoon via window.location.hash = "index die je wil behouden" lukt het normaal gezien ook. gewoon een functietje maken die de hash uitleest en corresponderende accordeon laat zien bij 't laden.
Klik om te vergroten...

Ik heb er dit van gemaakt, maar werkt helaas niet:doh: Begrijp ook echt ni veel van javascript... Ziet iemand toevallig zo wat ik fout doe? (Of zit ik er compleet langs?)
De accordions blijven gewoon werken, maar na een page_load telkens weer de 1ste die open klapt :cry:

Code: 
 $(function () {

            var isUpdating = false;

            $("#accordion").accordion({
                header: "h3",
                collapsible: true,
                autoHeight: false,
                changestart: function (event, ui) {
                    var activeIndex = $(this).find("h3").index(ui.newHeader[0]);
                    if (activeIndex != undefined) {
                        window.location.hash = activeIndex;
                        if (!isUpdating) {
                            isUpdating = true;
                            $("#accordion2").accordion("activate", activeIndex);
                        }
                        isUpdating = false;
                    }
                    else {
                        activeIndex = window.location.hash;
                        if (!isUpdating) {
                            isUpdating = true;
                            $("#accordion2").accordion("activate", activeIndex);
                        }
                        isUpdating = false;
                    }

                }
            });

            $("#accordion2").accordion({
                header: "h3",
                collapsible: true,
                autoHeight: false,
                changestart: function (event, ui) {
                    var activeIndex = $(this).find("h3").index(ui.newHeader[0]);
                    window.location.hash = activeIndex;
                    if (activeIndex != undefined) {
                        if (!isUpdating) {
                            isUpdating = true;
                            $("#accordion").accordion("activate", activeIndex);
                        }
                        isUpdating = false;
                    }
                    else {
                        activeIndex = window.location.hash;
                        if (!isUpdating) {
                            isUpdating = true;
                            $("#accordion").accordion("activate", activeIndex);
                        }
                        isUpdating = false;
                    }
                }
            });
          
            //hover states on the static widgets
            $('#dialog_link, ul#icons li').hover(
				function () { $(this).addClass('ui-state-hover'); },
				function () { $(this).removeClass('ui-state-hover'); }
			);

        });
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan