Results 1 to 6 of 6

Thread: Animated Collapsible DIV - graphical indicator of opened/closed status?

  1. #1
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Animated Collapsible DIV - graphical indicator of opened/closed status?

    1) Script Title: Animated Collapsible DIV

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...edcollapse.htm

    3) Describe problem: Any advice on the code required to put a plus or minus beside the link to indicate to users that this is an expandable / collapseable div? There is a good example of this at the University of Lethbridge site so you can easily see what I'm looking for:
    http://www.uleth.ca/man/help/sitemap.shtml

    Thanks,

    Brian

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I think I've got this worked out. The attached .zip archive contains the updated script and a demo page showing two ways to use this new feature and a third collapsible division that doesn't use it.

    Attachment 1156

    As a side note, this update also contains a global collapseprevious variable that may be set to true (it is currently false) at the top of the animatedcollapse.js file. No editing of the animatedcollapse.js is necessary, unless you wish to change the collapseprevious setting. See the demo page for +/- sign indicator usage examples. All other things work as they did before.

    Any questions, let me know.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    John,

    Thank you very much for the incredibly quick response and for the quick solution. I have two questions:

    1. I see that the indicator has a span class="ind". Is that class name essential to the operation of the script?
    2. If I leave out the span, will the script operate as previously, without the +/- indicator?

    Thanks,

    Brian

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by brian.goodman View Post
    1. I see that the indicator has a span class="ind". Is that class name essential to the operation of the script?
    No, it is used only to style the indicators. I used:

    Code:
    .ind {
    font-family:monospace;
    font-weight:bold;
    font-size:130%;
    color:red;
    }
    To get a nice look.

    2. If I leave out the span, will the script operate as previously, without the +/- indicator?
    Not exactly, I used the span tags with a class of ind just to have something to style. The thing that makes the script execute the indicator behaviors is having two elements, one with the id of id_name0 and another with the id of id_name1, where id_name is the the DIV_id name of the collapsible division instance and the id of its content area. You will notice that on the demo page included in my archive that you downloaded, the third collapsible division has no fish0 and fish1 elements. As a result, there is no indicator behavior for that instance. The DIV_id0 and DIV_id1 elements can be anything, images if you like, for example.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Oct 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    is there a way to hide the span elements if javascript disabled? otherwise, both indicators appear.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You can style them as visibility invisible or as display none. Have javascript reveal them.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •