#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    30
    Rep Power
    2

    expand/collapse <ul> always expanded


    hi;
    i have some long lists that i want to hide / show.

    they are sposed to be hidden by default.

    they are always visible, altho i have my java turned on in browser..

    there are many lists on my page but the last list is the one i try to get working first...and scrolling to the bottom will get you there fast..

    my external js file is named correctly and in the proper js
    folder

    the link for the html + js is here; the editor in js.bin shows
    3 small errors altho my editor says it is clean...
    ::

    Code:
    http://jsbin.com/aseboh/1/edit
    it has to be something simple and i really appreciate
    the help..

    thanx very much
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    A warning is not the same thing as an error (in this context anyway).

    In this case the first warning is your problem. "=" is the basic assignment operator, while "==" is the equality operator. What's happening is that the display property is being set to "none" inside the condition, which also evaluates as true, and as a result the same property is set to "block".

    In JS, using an assignment operator in a condition is used sometimes, especially when you're trying to access a DOM node that might not exist. Here's an example:
    Code:
    var el;
    if( el = document.getElementById('example') ) {
      el.style.display='block';
    }
    For others' reference, the said first warning is this:
    Code:
    Line 23: if (currentNode.style.display ='none') --- Expected a conditional expression and instead saw an assignment.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    30
    Rep Power
    2
    Originally Posted by Kravvitz

    In this case the first warning is your problem. "=" is the basic assignment operator, while "==" is the equality operator. What's happening is that the display property is being set to "none" inside the condition, which also evaluates as true, and as a result the same property is set to "block".
    hi:
    that was a very good catch.. i did fix it , but it did not change
    the behaviour..

    my post seems wrong..

    i think really i want a toggle function
    to expand / show a <ul>;

    i think it should be the same but maybe the code for toggle <ul> is simpler??
    is it appropriate to delete this post and repost it worded correctly ?
    thanx again for the attention to this
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Upon taking a longer look, I see that there are other issues in the code. There are a lot of XHTML errors. Some of them are causing the DOM that your script relies on to be different than you expect. The first step in debugging should always be making sure that your code is valid (in order to rule out any errors as the cause for the problem). If you don't understand some of the error messages, feel free to ask us to explain them.
    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/ (Under "more options", make sure the "Profile" is set to "CSS level 3" and set "Vendor Extensions" to "Warnings".)

    Two of the XHTML errors are repeated many times. They are that </li> end tags are required in XHTML and that "&" should be "&amp:", since "&" is a special character indicating the start of a "character entity".
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    30
    Rep Power
    2
    Originally Posted by Kravvitz
    Upon taking a longer look, I see that there are other issues in the code. There are a lot of XHTML errors. Some of them are causing the DOM that your script relies on to be different than you expect. The first step in debugging should always be making sure that your code is valid (in order to rule out any errors as the cause for the problem). If you don't understand some of the error messages, feel free to ask us to explain them.
    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/ (Under "more options", make sure the "Profile" is set to "CSS level 3" and set "Vendor Extensions" to "Warnings".)

    Two of the XHTML errors are repeated many times. They are that </li> end tags are required in XHTML and that "&" should be "&amp:", since "&" is a special character indicating the start of a "character entity".
    thanx for your attn and reply..
    validator lists some 1700 warnnings and errors..
    many of which are wrong.. like it says i cannot have <h>..
    and such.. i inherited the maintenance and makeover of this non profit site.
    maybe the declared xhtml is wrong and much could go thru validation by changing that..
    i do not understand how any of those warnings could affect
    my <dl><dt><dd>

    thanx.. i have got some of it working but not entirely..
    i should make new post for this.. to better update and define where im at

    thanx again
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Most HTML elements have either a restriction about what their parent can be and/or what their children (direct descendants) can be.

    For example, block-level elements, including headings (which in this case is an <h4>), may not be a descendant of a <dt> element nor of a <p> element. Also there is no such thing as a "caption1" element; there are "caption" and "figcaption" elements, but they are for use with a <table> and a <figure>, respectively. (<figcaption> and <figure> are new in HTML5).

    Similarly, a <div> may not be a direct child of a <ul>, nor a <blockquote> of a <dl>.

    maybe the declared xhtml is wrong and much could go thru validation by changing that..
    I wouldn't call it "wrong". However, changing to an HTML5 doctype would help.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    i do not understand how any of those warnings could affect
    my <dl><dt><dd>
    There is a misplaced <blockquote> tag in there. The script is looking for <dd> elements which are the sibling of a <dt> element, but with the <blockquote> in there the structure is messed up.

    I've also noticed an error in the JS: "currentNode.tagname" should be "currentNode.tagName".
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo