jQuery Ui Accordion - element openen bij openen pagina - Softwareontwikkeling

zondag 9 november 2008 22:45

Acties:

0 Henk 'm!

Topicstarter

Hoi,

Voor een nieuw site projectje maak ik voor mijn menu gebruik van het Accordion van jQuery.

Dat vind je hier: http://docs.jquery.com/UI/Accordion

Mijn code:

HTML:

<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>

<script type="text/javascript">
 $(document).ready(function(){
 $("#nav").accordion({ autoHeight: false });
 });
</script>

</head>

<body>

<div id="left_nav">
    <ul id="nav">
    <li><a href="#">nr1</a></li>
    <li><a href="#">nr2</a></li>
    <li><a href="#">nr3</a>
            <ul>
                <li><a href="#">.</a></li>
                <li><a href="#">..</a></li>
                <li><a href="#">...</a></li>
            </ul>        
        </li>
    <li><a href="#">nr4</a>
            <ul>
                <li><a href="#">.</a></li>
                <li><a href="#">..</a></li>
                <li><a href="#">...</a></li>
            </ul>        
        </li>
    <li><a href="#">nr5</a>
            <ul>
                <li><a href="#">...</a></li>
                <li><a href="#">....</a></li>
            </ul>        
        </li>
    <li><a href="#">nr6</a></li>
    <li><a href="#">nr7</a></li>
    </ul>
</div>

</body>
</html>

(doctype en overbodig dingen effe weggelaten)

Dat werkt goed nu. Maar ik zou een bepaald deel willen openen bij het laden van de pagina.

Dat zou zo moeten:

code:

1	$(".selector").accordion("activate", 1)

(zie bij "Documantation": accordion( "activate", index )

Omgevormd voor mijn geval:

HTML:

<script type="text/javascript">
 $(document).ready(function(){
 $("#nav").accordion({ autoHeight: false });
 $("#nav").accordion("activate", 3);
 });
</script>

Dat heb ik gedaan, maar doet niks?

Een andere manier zou als volgt zijn:

code:

1	$(".selector").accordion("activate", "a:first")

Met de volgende aangepaste HTML

HTML:

    <li><a href="#" id="opendeze">nr3</a>
            <ul>
                <li><a href="#">.</a></li>
                <li><a href="#">..</a></li>
                <li><a href="#">...</a></li>
            </ul>        
        </li>

zou dat moeten worden:

HTML:

<script type="text/javascript">
 $(document).ready(function(){
 $("#nav").accordion({ autoHeight: false });
 $("#nav").accordion("activate", "li:opendeze");
 });
</script>

Maar ook dat doet het niet...

Ik snap het niet meer.

Iemand een idee?

Alvast bedankt!

zondag 9 november 2008 22:50

Acties:

0 Henk 'm!

Tofu

Ik ken enkel Prototype, dus het is een klein gokje:
Maar zou je lijn 20 niet kunnen vervangen door:

code:

1	<li id="nr3"><a href="#">nr3</a>

en die dan openen met:

code:

1	$("#nav").accordion("activate", "#nr3");

oid?

zondag 9 november 2008 22:56

Acties:

0 Henk 'm!

Tweaker36

Topicstarter

Ik had ook al enkele mogelijke combinaties geprobeerd, of ik deze al gehad had weet ik niet, alleszins, het werkt helaas niet...

zondag 9 november 2008 22:56

Acties:

0 Henk 'm!

Juup

Probeer eens zoiets:

JavaScript:

1 2	var $acc = $("#nav").accordion({ autoHeight: false }); $acc.changeAccordion("activate", 3);

Een wappie is iemand die gevallen is voor de (jarenlange) Russische desinformatiecampagnes.
Wantrouwen en confirmation bias doen de rest.

zondag 9 november 2008 23:06

Acties:

0 Henk 'm!

Tweaker36

Topicstarter

@ Jaaap

Naar ik veronderstel bedoel je het als volgt:

HTML:

<script type="text/javascript">
 $(document).ready(function(){
 var $acc = $("#nav").accordion({ autoHeight: false }); 
 $acc.changeAccordion("activate", 3);
 });
</script>

Maar dat werkt niet. (accordion werkt maar dat deel staat niet open), jammer genoeg.

zondag 9 november 2008 23:14

Acties:

0 Henk 'm!

Juup

Foutmelding?
Loop er eens met een (Firebug) debugger doorheen...

Een wappie is iemand die gevallen is voor de (jarenlange) Russische desinformatiecampagnes.
Wantrouwen en confirmation bias doen de rest.

zondag 9 november 2008 23:20

Acties:

0 Henk 'm!

Tweaker36

Topicstarter

Gelukt

Moet ik altijd toch ergens een klein detail vergeten typen zijn.

Het is gelukt via die 2de methode:

HTML:

<script type="text/javascript">
 $(document).ready(function(){
 $("#nav").accordion({ autoHeight: false });
 $("#nav").accordion("activate", "#opendeze");
 });
</script>

HTML:

    <li><a href="#" id="opendeze">nr3</a>
            <ul>
                <li><a href="#">.</a></li>
                <li><a href="#">..</a></li>
                <li><a href="#">...</a></li>
            </ul>        
        </li>

Hoe je die eerste methode dan werkend moet krijgen, geen idee, maar het lukt nu toch.

Allemaal bedankt voor de zeer snelle reply's.

zondag 9 november 2008 23:27

Acties:

0 Henk 'm!

Tweaker36

Topicstarter

Juup schreef op zondag 09 november 2008 @ 23:14:
Loop er eens met een (Firebug) debugger doorheen...

Niet nodig nu, maar komt later wel eens van pas. Dank voor de tip!

Kende deze niet, maar inmiddels geïnstalleerd.

Pagina: 1

Reageer