Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2014-03-27
7
Medium Priority
?
161 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 44

Accepted Solution

by:
Chris Stanyon earned 2000 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

705 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