How to toggle the achor text along with the div? 1

[PSchubert]

Hi all,

The following code almost works perfectly, except that the anchor text does not toggle on expand (+) and collapse (-). Any suggestions?

(JavaScript)
       function Toggle(id, link) {

  		var ListItems = document.getElementsByTagName("div");
		for(var x=0; x<ListItems.length; x++) {
			name = ListItems[x].getAttribute("name");
			if (name == 'ListItems') {
				if (ListItems[x].id == id) {
					if (ListItems[x].style.display == 'block') {
						ListItems[x].style.display = 'none';
						link.innerHTML = '+';
					}
					else {
						ListItems[x].style.display = 'block';
						link.innerHTML = '&#8211;';
					}
				}else {
					ListItems[x].style.display = 'none';
					link.innerHTML = '+';
				}
			}
		}
	}

(HTML)
	              <ul>
                        <li><a href="#" onclick="Toggle('ListItems1', this)">+</a> complete collection registration
				    <div name="ListItems" id="ListItems1" style="display:none">
    					<ul><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc fermentum.</li></ul>
    				    </div>
			</li> 
                        <li><a href="#" onclick="Toggle('ListItems2', this)">+</a> inventory database creation and management
				    <div name="ListItems" id="ListItems2" style="display:none">
    					<ul><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc fermentum.</li></ul>
    				    </div>
			</li> 
                        <li><a href="#" onclick="Toggle('ListItems3', this)">+</a> photographic documentation
				    <div name="ListItems" id="ListItems3" style="display:none">
    					<ul><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc fermentum.</li></ul>
    				    </div>
			</li>
                   </ul>

 

[vacunita]

The link object is always a reference to the link that was clicked, so changing its innerHTML will only ever affect the one that was clicked.

The only time your + sign is going to turn into a minus is when you expand the last option. Since there aren't any more options left, it doesn't run the loop again so it doesn't enter your last else{} statement and keeps the innerHTML as a "-"


You'll need to get another array for the Links you need to change so you can loop through them, and change their inner HTML.

Assuming you don;t have other links there with an innerHTML that's a "-" character exactly the following altered code should work.

function Toggle(id, link) {

		var ListItems = document.getElementsByTagName("div");
		var ListItemObj = document.getElementById(id);
		var ListItemState=ListItemObj.style.display;
		var Links=document.getElementsByTagName("a");
		for(var x=0; x<Links.length;x++){
			if(Links[x].innerHTML=="-"){
				Links[x].innerHTML="+";
			}
		}
		for(var x=0; x<ListItems.length; x++) {
            name = ListItems[x].getAttribute("name");
            if (name == 'ListItems') {
                     ListItems[x].style.display = 'none';
            }
			if(ListItemState=="none"){
				ListItemObj.style.display="block"
				link.innerHTML="-";
			}
        }
    }

Also note I changed your logic a bit for the toggling of the divs. There's no need to check so many things, including the checking if the id matches the one you already have. Just use the Id directly to access the object.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[PSchubert]

Hey Phil,

You rock! You've really helped a guy out, whose name also happens to be Phillip. Thanks for the schooling. Awesome!

Phillip

 

[vacunita]

Always glad to help a fellow Phillip.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech