dc_jt Posted April 13, 2007 Share Posted April 13, 2007 Ive got the following which when 'The Resort' is clicked the links below either appear or hide. This works fine, however I would like the class to also change to selected when the links are shown. <script type="text/javascript"> function showHide(link) { var theDiv = link.parentNode.getElementsByTagName("div")[0]; if (link.innerHTML == "The Resort") { // show the div theDiv.style.display = ""; link.innerHTML = "The Resort "; } else { // hide the div theDiv.style.display = "none"; link.innerHTML = "The Resort"; } } </script> </head> <body> <div id="sidelinks"> <div class="additionalInfo"> <ul><li><a href="nojavascript.html" onclick="showHide(this);return false;">The Resort</a> <div style="display:none;"> <li class="sub"><a href="#" class="sub_link">- The Hotel</a></li> <li class="sub"><a href="#" class="sub_link">- Packages & Tarrifs</a></li> <li class="sub"><a href="#" class="sub_link">- Guest Book</a></li> </div> </div> The above shows it with no class but I want it to be like this: <ul><li><a href="nojavascript.html" class="selected" onclick="showHide(this);return false;">The Resort</a> When the links are shown. How can I do this? Thanks Quote Link to comment Share on other sites More sharing options...
Goose Posted April 13, 2007 Share Posted April 13, 2007 Inside each condition you will want something like this: theDiv.className = 'new_class'; or link.className = 'new_class'; Depending on which class you want to change. Quote Link to comment Share on other sites More sharing options...
dc_jt Posted April 13, 2007 Author Share Posted April 13, 2007 Thanks alot goose, the link.className one worked perfectly Now that was just for the 'The Resort' one, I have about five others that I want to do in the same way. Do I have to do write out javascript for each one or is there a way I can use the same one? Thanks Quote Link to comment Share on other sites More sharing options...
Goose Posted April 13, 2007 Share Posted April 13, 2007 You are going to have to call element.className = 'class'; per element that you will want to change. If you wrap that inside a function or a loop that is up to you. Quote Link to comment Share on other sites More sharing options...
dc_jt Posted April 13, 2007 Author Share Posted April 13, 2007 Sorry not the class, I want to run the showHide function for about 5 different things?? Quote Link to comment Share on other sites More sharing options...
Goose Posted April 13, 2007 Share Posted April 13, 2007 I am not sure exactly what you mean ... I got up too early this morning Maybe you can explain what you want to happen as if you were talking to a tired programmer Quote Link to comment Share on other sites More sharing options...
dc_jt Posted April 13, 2007 Author Share Posted April 13, 2007 Sorry probably my fault. For example, I have a menu on the left of my page with 3 headings, say heading 1, heading 2, heading 3. When I click heading 1, heading sub1.1 and heading sub1.2 appear. This all works fine with the script above. However, I now want to do the same for heading 2 and heading 3. Can I use the same showHide function or do I need to create individual ones for each heading? Hope that makes more sense? Thanks Quote Link to comment Share on other sites More sharing options...
Goose Posted April 13, 2007 Share Posted April 13, 2007 Yes that makes very much sense! This is how I would do that. HTML Part <a href="nojavascript.html"" id="resort" onclick="showHide(this); return false;">The Resort</a> <div id="resort_sub" style="display: none;"> ... </div> JS Part function showHide(link) { var theDiv = document.getElementById(link.id + '_sub'); if(theDiv.style.display == 'block'){ theDiv.style.display = 'none'; link.className = 'something'; } else { theDiv.style.display = 'block'; link.className = 'something_else'; } } What I did here was make a more generic function that you could use for multiple cases. It does the checking based on the id of the link clicked. So they way I would name a link would be id="resort" or something else and have the sub links for each main link be in a div called id="resort_sub". Let me know if this doesn't make sense. <html> <head> <script type="text/javascript"> function showHide(link) { var theDiv = document.getElementById(link.id + '_sub'); if(theDiv.style.display == 'block'){ theDiv.style.display = 'none'; link.className = 'something'; } else { theDiv.style.display = 'block'; link.className = 'something_else'; } } </script> </head> <body> <a href="nojavascript.html"" id="resort" onclick="showHide(this); return false;">The Resort</a> <div id="resort_sub" style="display: none;"> ... </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
dc_jt Posted April 13, 2007 Author Share Posted April 13, 2007 Thank you so much. You are a genius Goose Thanks again DAvid Quote Link to comment Share on other sites More sharing options...
Goose Posted April 13, 2007 Share Posted April 13, 2007 Your welcome, glad to help. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.