asked on

I need to create another instance of an element that has specific css design

I have such html code:

<div id='collapse_menu'>
            <a id="collapse_icon" onclick="handle_collapse(this);">++</a>Banks
           <ul id="collapse_content">
               <li><a href="http://bank1.com">Bank1</a></li>
               <li><a href="http://bank2.com">Bank2</a></li>
               <li><a href="http://bank3.com">Bank3</a></li>
           </ul>
       </div>

Open in new window

css code:

#collapse_menu ul{display:none;}
#collapse_menu li{font-style:italic;}
#collapse_icon {cursor:pointer;}

Open in new window

javascript:

var collapse_icon_collapsed = '++' ;
var collapse_icon_expanded = '--' ;
         
function handle_collapse(elm)
{
  if(this.collapse_icon.innerHTML == collapse_icon_collapsed) {this.collapse_icon.innerHTML = collapse_icon_expanded ;this.collapse_content.style.display="block";}
  else
  if(this.collapse_icon.innerHTML == collapse_icon_expanded) {this.collapse_icon.innerHTML = collapse_icon_collapsed ;this.collapse_content.style.display="none";}
}

Open in new window

What I am hoping to acheive is this:
I want to use this template so that when I want to add another category(menu) for
theatres for example, I'll do something like this:

<div id='collapse_menu'>
            <a id="collapse_icon" onclick="handle_collapse(this);">++</a>Theatres
           <ul id="collapse_content">
               <li><a href="http://theatre1.com">theatre1</a></li>
               <li><a href="http://theatre.com">theatre2</a></li>
               <li><a href="http://theatre3.com">theatre3</a></li>
           </ul>
       </div>

Open in new window

If I use this now, pressing second menu will expand the first one!
I'm just going about it the wrong way, any help would appreciated.

Gary

You cannot have multiple elements with the same ID - ID is supposed to be unique.

Anwar Saiah

ASKER

That much I know, question is how do I go about this?
I need the same template that I can use over and over.
Perhaps call the second one menu2 that is also a menu that has the same css attributes or something!

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Anwar Saiah

ASKER

Yes, quite simple isn't it!
give them different ids but same classes.
Thanks.

Anwar Saiah

ASKER

Very simple, right on the spot.

Gary

Use this javascript instead, it doesn't rely on ID's so you can leave your HTML as it is

http://jsfiddle.net/GaryC123/hK44A/

<script>
        var collapse_icon_collapsed = '++';
        var collapse_icon_expanded = '--';
    function handle_collapse(elm) {
        if (elm.innerHTML == collapse_icon_collapsed) {
            elm.innerHTML = collapse_icon_expanded;
            elm.nextElementSibling.style.display = "block";
        } else if (elm.innerHTML == collapse_icon_expanded) {
            elm.innerHTML = collapse_icon_collapsed;
            elm.nextElementSibling.style.display = "none";
        }
    }
</script>

Open in new window

Anwar Saiah

ASKER

Thanks