The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Producing a nested collapsible list for a sidebar
Melinda
post Mar 7 2012, 11:29 AM
Post #1





Group: Members
Posts: 3
Joined: 6-March 12
Member No.: 16,648



Hi,

Could I get some assistance with producing code for a collapsible list please?

Ive fond some tags/ code but I dont know what the ahref should refer to.

CODE
<ul id="someID">
  <li>The January Garden
    <ul><a href="java script:cl_expcol('ex3');">[+]</a>
      <li><a href="someHref">The lawn</a></li>
      <li><a href="someHref">The Greenhouse</a></li>
      <li><a href="someHref">Vegetables</a></li>
      <li><a href="someHref">FRuit</a></li>
    </ul>
  </li>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies(1 - 4)
pandy
post Mar 7 2012, 11:48 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



The URL to the page you want the link to lead to.
http://htmlhelp.com/faq/html/links.html#link-howto

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Melinda
post Mar 7 2012, 12:24 PM
Post #3





Group: Members
Posts: 3
Joined: 6-March 12
Member No.: 16,648



Cheers for that Pandy! biggrin.gif


About the nesting code- do I need to add that bit of java script at the top to make the list collapse, or can I do without it?

CODE
<ul id="The Gardening Month">
<li><a href="java script:notA();"><p><strong>The January Garden</strong></p></a></li>
    <li>
    <ul>
      <li><a href="http://lewishamgardens.webs.com/the-gardening-month">The Vegetable Garden</a></li>
      <li><a href="http://lewishamgardens.webs.com/the-gardening-month">The Flower Garden</a></li>
      <li><a href="http://lewishamgardens.webs.com/the-gardening-month">The Fruit Garden</a></li>
      <li><a href="http://lewishamgardens.webs.com/the-gardening-month">The Greenhouse</a></li>
      <li><a href="http://lewishamgardens.webs.com/the-gardening-month">The Lawn</a></li>
      <li><a href="http://lewishamgardens.webs.com/the-gardening-month">The Armchair</a></li>
      <li><a href="http://lewishamgardens.webs.com/the-gardening-month">Other Jobs</a></li>
      </ul><p> </p>


This post has been edited by Melinda: Mar 7 2012, 12:45 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Melinda
post Mar 7 2012, 12:55 PM
Post #4





Group: Members
Posts: 3
Joined: 6-March 12
Member No.: 16,648



Sorry for not explaining more clearly.

I would like a list of the months of the year with a nested list of gardening activities inside.

When the activity is clicked, it should link to that activity in the specific month.

But I dont want the activities to be visible all the time- hence the need for it to be collapsible

This post has been edited by Melinda: Mar 7 2012, 12:55 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 7 2012, 06:55 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



If something should happen when something is clicked you need JavaScript. It's easy to find examples.

http://www.google.com/search?q=collapsable%20list%20css
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 04:07 AM