Solved

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

Posted on 2014-03-27
7
154 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
What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

 
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

Back Up Your Microsoft Windows Server®

Back up all your Microsoft Windows Server – on-premises, in remote locations, in private and hybrid clouds. Your entire Windows Server will be backed up in one easy step with patented, block-level disk imaging. We achieve RTOs (recovery time objectives) as low as 15 seconds.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
add a 3rd selection to sum 7 29
simple javascript form validation 2 19
If condition on Html with Asp 11 17
Call a function within the ASP code 4 12
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

777 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