Jquery UI combinatie tabs en accordion 2de opent niet goed

[bluesbrother]

Ik ben bezig met een module in Joomla die gebruikmaakt van Jquery.
Ik moest het van mijn baas wat onherkenbaar maken dus sorry voor de "censuur".

Ik ben nu al een paar dagen bezig met een probleem dat te maken heeft met het openen van de 2de accordion. Ik heb in mijn javascriptcode staan dat deze uiteraard gemaakt moeten worden, en dan welke tab zichtbaar moet zijn.

code:

jQuery("#mytabs").tabs({ selected: 1});

Naar welke Tab deze verwijst gaat goed. De andere tab met de accordion erin gaat dan fout. Hij wordt wel gemaakt, maar wil dan niet goed openen. Het onderste plaatje en dan de eerste accordion gaat dus niet verder open dan zo en met scrollbars.


Zelfs als ik :

code:

jQuery("#mytabs").tabs({ selected: 1});

uitzet dan heb ik hetzelfde probleem bij beide en gaan ze allebei niet meer goed open.
Dit geldt ook ook als ik alle franje en opties uitzet en alleen de opdrachten geef om de tabs en de accordion te maken. Dus alleen het hoogstnoodzakelijke.

Ik hoop dat iemand kan helpen.

Bedankt
Alvast
Bluesbrother

[Tharulerz]

Uitgeklede testcase? Meer code?

Ik denk dat je een ID een aantal keer herbruikt, wat niet de bedoeling is, maar moeilijk in te schatten aan de hand van 2 screenshots en 1 regel code...

[Verwijderd]

Hi brother Staan er misschien alleen elementen met float:left/right, of position:absolute in de 2e accordeon?

[bluesbrother]

Okay ik heb het even in een losstaand ding gezet.

http://aldo.tweakdsl.nl/jq/

Ook hier gaan een aantal zaken fout. Vergelijkbaar met de problemen waar ik mee zit.
Als je wat rondklikt dan zie je een scrolbar die niet nodig is,
en accordion delen die niet open gaan of na 1 keer open gegaan zijn, dicht blijven.
De tab komt maar 1 keer voor, de accordions meerdere keren. (6 x)
Ze hebben allemaal een uniek ID en die gebruik ik dan ook maar 1 keer.

Als je het hele pakketje wilt downloaden:

http://aldo.tweakdsl.nl/jq/jatzee.zip

Ik hoop dat dit wat meer duidelijkheid geeft ?

[bluesbrother]

Hi Blues (mooie naam)

de eerste accordion staat een 2de accordion deze staat in een div met float left.
Daarnaast staat een div met een float right.
Onderaan heb ik een lege div met een clear: both.

Opvallend blijft dat als ik een

code:

$("#Mytab").tabs({ selected: 1});

doe, die specifieke tab er goed uitkomt. Althans de eerste accordion met daarin de andere accordion.
De accordions eronder met daar weer een accordion in doen het weer niet goed
Dus de nummer 1 gaat goed. de rest gaat fout.

Nog even een afbeelding gemaakt om het idee van de geneste accordions wat duidelijker te maken:
De eerste bovenste die in de afbeelding is gesloten gaat dus goed. Mits de Tab is geselcteerd zoal hierboven uitgelegd. (Anders gaan ze allemaal fout) Alle accordions die onder deze eerste staan gaan ook goed.
Maar alle die dus onder de gesloten accordion staan gaan fout.




Heb even de float er van afgehaald maar dit gaf geen oplossing. Maakte voor het probleem niet uit.

[ Voor 4% gewijzigd door bluesbrother op 07-10-2011 22:09 ]

[Tharulerz]

Probeer deze eens:

http://forum.jquery.com/t...and-tabs-in-the-same-page
http://stackoverflow.com/...ui-accordions-within-tabs

(Accordions dus initialiseren voor de tabs)

Edit: dat werkt dan wel bij mij. Blijkbaar heb je dan toch niet zoveel moeite gedaan als de 4e en 5e google hit op "jquery accordion tabs" je de oplossing geeft... En wij jouw werk maar doen...

[ Voor 29% gewijzigd door Tharulerz op 08-10-2011 01:23 ]

[bluesbrother]

Ik had dit al geprobeerd. Ik heb diverse volgordes en manieren van selecteren gebruikt.
Ik heb ook in het voorbeeld de volgorde veranderd, eerst de tabs, dan de accordion.

http://aldo.tweakdsl.nl/jq/

Alles wat als tweede komt werkt dus niet of slecht, of eenmalig.

[Tharulerz]

Nu heb je de accordion declaratie van de 2e tab voor die van de 1e tab gezet, maar de tabs worden zelf nog altijd als eerste geïnitialiseerd.

Je moet deze regel:

JavaScript:

$('#tabs').tabs();

als laatste zetten...

Hoe moeilijk kan het zijn?

[R4gnax]

Zullen we dat even volgens het boekje doen?

JavaScript:

$(".my-tabs")
  .bind( "tabsshow", function( event, ui ) {
    $( ui.panel ).find( ".my-accordeon" ).accordeon();
  })
  .tabs({ selected: 1 })

Les voor de toekomst: lees de handleiding! Dat voorkomt narigheid.

[moozzuzz]

R4gnax schreef op zaterdag 08 oktober 2011 @ 17:20:
Zullen we dat even Les voor de toekomst: lees de handleiding! Dat voorkomt narigheid.

Bij JQuezry is dat niet altijd waar

[R4gnax]

moozzuzz schreef op vrijdag 14 oktober 2011 @ 13:13:
[...]

Bij JQuezry is dat niet altijd waar

En zijn daar argumenten voor, of wordt er maar wat geroepen? Het is namelijk zo dat jQuery juist heel complete en duidelijke documentatie heeft. De documentatie wordt ook altijd geactualiseerd voor nieuwe versies en fouten of onduidelijkheden worden actief gecorrigeerd.