Solved

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

Posted on 2014-03-27
7
156 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

739 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