• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 189
  • Last Modified:

How do I create different JavaScript variables based on a single id?

I am using the following toggle script to show and hide divs based on their id:

<script type="text/javascript">
<!--
    function toggle(id) {
       var e = document.getElementById(id);
       if(!e.style.display || e.style.display == "none"){
          e.style.display = 'block';
	   }
       else{
          e.style.display = 'none';
	   }
	}
//-->
</script>

Open in new window


The script works well, but I now want a single toggle to manipulate multiple ids.

Currently, ids are formatted as '[name]-[number]', for example "nav-3".

How can I modify this script to take the id and append extra info, such as "nav-3", "nav-3-ul", "nav-3-div" etc?

Hopefully this example helps explain what I'm after:

<script type="text/javascript">
<!--
    function toggle(id) {

       var e = document.getElementById(id); // where id is provided as "nav-3"
       var a = document.getElementById(id-ul); // using the id and appending -ul e.g. "nav-3-ul"
       var b = document.getElementById(id-div); // using the id and appending -div e.g. "nav-3-div"

       if(!e.style.display || e.style.display == "none"){
          e.style.display = 'block';
          a.style.display = 'block';
          b.style.display = 'block';
	   }
       else{
          e.style.display = 'none';
          a.style.display = 'none';
          b.style.display = 'none';
	   }
	}
//-->
</script>

Open in new window

0
93jordanaj
Asked:
93jordanaj
1 Solution
 
leakim971PluritechnicianCommented:
      var e = document.getElementById(id); // where id is provided as "nav-3"
       var a = document.getElementById(id+"-ul"); // using the id and appending -ul e.g. "nav-3-ul"
       var b = document.getElementById(id+"-div"); // using the id and appending -div e.g. "nav-3-div"

Open in new window


<< + >> is used to concatenate string
Use "" or '' to create a string
0
 
93jordanajAuthor Commented:
Thank you very much. As you can tell JavaScript isn't be strong point and I'd been playing with concat() with no luck. This works perfectly.

Alex
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now