jQuery Ui Accordion - element openen bij openen pagina - Softwareontwikkeling

zondag 9 november 2008 22:45

Acties:

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:

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:

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:

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:

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:

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:

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:

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