Solved

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

Posted on 2014-03-27
7
153 Views
Last Modified: 2014-03-27
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.
0
Comment
Question by:aboo_s
  • 4
  • 2
7 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39959496
You cannot have multiple elements with the same ID - ID is supposed to be unique.
0
 
LVL 10

Author Comment

by:aboo_s
ID: 39959515
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!
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39959555
Use classes instead of IDs:

<div class='collapse_menu'>
            <a class="collapse_icon" onclick="handle_collapse(this);">++</a>Banks
           <ul class="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>

.collapse_menu li{font-style:italic;}
.collapse_icon {cursor:pointer;}

Open in new window

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 10

Author Comment

by:aboo_s
ID: 39959594
Yes, quite simple isn't it!
give them different ids but same classes.
Thanks.
0
 
LVL 10

Author Closing Comment

by:aboo_s
ID: 39959600
Very simple, right on the spot.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39959603
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

0
 
LVL 10

Author Comment

by:aboo_s
ID: 39959963
Thanks
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now