Add new ID for every new loop

Question

I'm developing a sort of loop using li tags. For this loop, I'm going to use some text that gonna be displayed through a simple open and close JavaScript code that I've made when clicking somewhere. As you guys know, this kind of code is manipulated through getElementById property. However, since I'm going loop these lists items, I cannot repeat IDs throughout them. So, how can I loop these list items without repeating the ID?

Take the HTML below:

<section class="pro-further">
  <span>Consulte</span><br>
  <ul>
    <li><div onClick="furtherInfo('test');">Info one</div>
      <div id="test">Text for first info</div>
    </li>
    <li><div>Info two</div>
      <div>Text for second info</div>
    </li>
    <li><div>Info three</div>
      <div>Text for third info</div>
    </li>
    <li><div>Info four</div>
      <div>Text for fourth info</div>
    </li>
    <li><div>Info five</div>
      <div>Text for fifth info</div>
    </li>
    <li><div>Info six</div>
      <div>Text for sixth info</div>
    </li>
  </ul>
</section>

The JavaScript...

var furtherInfo = function(auei) {
  var openInfo = document.getElementById(auei);
  if(openInfo.style.display == "block") {
    openInfo.style.display = "none"
  }else {
    openInfo.style.display = "block"
  }
}

And the CSS

.pro-further ul {
  width:100%;
  list-style-type:none;
  margin-left:0px;
}

.pro-further ul li > div {
  width:99.3%;
  font-size:14px;
  color:#FFF;
  background:url(../images/plus2.png) #23459F no-repeat 99% 50%;
  padding:6px 2px 6px 5px;
  margin-bottom:3px;
  cursor:pointer;
}

.pro-further ul li > div + div {
  width:98.5%;
  font-size:13px;
  color:#737373;
  background:white;
  border:1px solid #23459F;
  padding:2px 5px 2px 5px;
  margin-top:-3px;
  display:none;
  cursor:text;
}

Thank you!

Check here to try out

It is illegal to give the same ID to multiple DOM elements, anyway. — Lightness Races in Orbit, May 29 '14 at 20:38

score 2 · Answer 1 · edited May 23 '17 at 12:27

2

You could give each item a class and then loop through them using document.getElementsByClassName()

See more info here: How to getElementByClass instead of GetElementById with Javascript?

edited May 23 '17 at 12:27

Community

1
1

answered May 29 '14 at 20:37

Andrew

18,680
13
103
118

score 1 · Answer 2 · answered May 29 '14 at 20:42

You could, in this case, just use DOM traversal, assuming the sibling-relationship is constant:

var furtherInfo = function(el) {
    var openInfo = el.nextElementSibling;
  openInfo.style.display = openInfo.style.display == 'block' ? 'none' : 'block'
}

Assuming HTML such as:

<ul>
    <li><div onClick="furtherInfo(this);">Info one</div>
      <div id="test">Text for first info</div>
    </li>
    <li><div onClick="furtherInfo(this);">Info two</div>
      <div>Text for second info</div>
    </li>
    <!-- and so on... -->
  </ul>

JS Fiddle demo.

score 0 · Accepted Answer · answered May 29 '14 at 20:40

Here's an ID-less solution:

window.onload = function() {
    var elems = document.getElementsByTagName("li");
    for(var i = 0; i < elems.length; i++) {
        elems[i].onclick = toggle;
    }
};

function toggle() {
    var divs = this.getElementsByTagName("div");
    divs[1].style.display = ((divs[1].style.display == "block") ? "none" : "block");
}

To restrict the "getElementsByTagName", I'd suggest giving your outer container (the one with class="pro-further" an ID, so it would look like <section id="pro-further-toggles"> so then you could specify var elems = document.getElementById("pro-further-toggles").getElementsByTagName("li");

Add new ID for every new loop

3 Answers3