Hallo,
bin programmiertechnisch ein DAU bzw. friemel mich mehr oder weniger durch einen Code [ich hoffe, der gewählte Präfix/Themenbereich passt - CSS ist hierbei wohl auch mit im Spiel...]. Bei folgendem Problem komme ich mit dieser Methode aber nicht wirklich weiter, daher diese Anfrage:
Ich möchte in mein Blog (bzw. in die Seitenleiste desselben) eine ausklappbare Liste bauen, wie sie z.B. hier zu sehen ist:
http://users.cs.dal.ca/~jamie/CS4173/examples/JS/nested_lists/Nestedlists.html
Das Ganze soll eine "alphabetische Liste" ohne Verschachtelung werden nach folgendem Prinzip (also ähnlich wie im obigen Beispiel "Item 1" bzw. "Item 3", nur dass die erste Unterebene aus Hyperlinks besteht):
► #
► A
► B
▼ C
Hyperlink 1
Hyperlink 2
Hyperlink 3
...
► D
...
► Z
Ich bin bei Blogger (Google) und dort wird ein zumindest optisch ähnliches Prinzip auch für die Archivansicht (u.a.) angeboten. Sofern ich das richtig beurteile, verwendet Blogger allerdings kein JavaScript, was es von obigem Beispiel/Link unterscheidet.
Folgender Code stammt aus der Blogger-Vorlage und ist wohl der Teil, der für diese Archivansicht verantwortlich ist:
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='"archivedate " + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
(<span class='post-count'><data:i.post-count/></span>)
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == "expanded"'>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=close&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy toggle-open'>▼ </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy'>► </span>
</a>
</b:if>
</b:if>
</b:includable>
Und diesen Code findet man bspw. hier (s. unter "Links to this post"): http://buzz.blogger.com/2006/08/new-old-feature-on-beta.html
<div id="blogger-dcom-block" style="display: block;">
<dt class="comment-title">
<span style="background-image: url(http://www.blogger.com/img/triangle_open.gif);" class="comment-toggler"> </span>
<a href="http://www.syafthegeek.com/old-blogger-is-dead/" rel="nofollow">Old Blogger is dead</a> <span class="item-control blog-admin"><a style="border: medium none ;" href="http://www.blogger.com/delete-backlink.g?blogID=2399953&postID=115698403156343871&backlinkURL=http%3A//www.syafthegeek.com/old-blogger-is-dead/" title="Remove Link"><span class="delete-comment-icon"> </span></a></span>
</dt>
<dd style="display: block;" class="comment-body">This is the timeline or history of the old Blogger.com. 14 August 2006: The new version of Blogger launches as a public beta 23 August 2006: Blogger’s 7th birthday 30 August 2006: Edit HTML added to beta’s Layouts <b>...</b>
<br>
<span class="comment-poster">
<em>posted by syafthegeek @ 07:01</em>
</span>
</dd>
<span id="blogger-dcom-ihtest"></span>
</div>
Ein Verwursten der beiden zu "meiner Wunschliste" übersteigt meine "Programmierfähigkeiten" - das Ein-/Ausklappen ist dabei das/mein Hauptproblem...
Meine Frage: Kann mir jemand ein paar Tipps geben zur Codeerstellung einer solchen Liste, wie ich sie oben dargestellt habe OHNE JavaScript?
HERZLICHEN DANK an alle Unterstützer!
Andreas