Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

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

Status
Not open for further replies.

PSchubert

Technical User
Jun 6, 2006
50
AU
Hi all,

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

Code:
(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>
 
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.

Code:
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
 
Hey Phil,

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

Phillip
 
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
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top