Show/hide div with javascript

Question

I have a menu which should show the sub-elements organised in a div when clicked.

I provide below the structure of the html

function showOrHide() {
  if (window.innerWidth < 800) {

    var div = document.getElementById("links");
    if (div.style.display == "block") {
      div.style.display = "none";
    } else {
      div.style.display = "block";
    }
  }
}

<li>
  <div id="image" onclick="showOrHide()">
    <span>Test1</span>
  </div>
  <div id="links">
    <span>Test2</span>
  </div>
</li>
<li>
  <div id="image" onclick=" showOrHide()">
    <span>Test3</span>
  </div>
  <div id="links">
    <span>Test4</span>
  </div>
</li>

I would like the div id="links" to be shown or hidden when I click on div id="image". I have the following javascript.

The problem that I face is that onclick javascript is showing all the divs id=links in the menu and I would like only the div links next to the div image to be shown. Example when I click on Test1 only Test2 should be shown.

Bilal Siddiqui · Accepted Answer · 2019-10-15 05:08:27Z

2

Element IDs should be unique within the entire document.

You must try creating unique id per div.

function showOrHide(rowNum) 
{ if (window.innerWidth < 800) { 

    var div = document.getElementById("links_"+ rowNum);
    if (div.style.display == "block") 
    {
        div.style.display = "none";
    }
    else 
    {
        div.style.display = "block";
    }
}
}

<li>
<div id="image_1" onclick="showOrHide(1)">
<span>Test1
</span></div>
<div id="links_1">
<span >Test2</span>
</div></li>
<li>
<div id="image_2" onclick=" showOrHide(2)">
<span>Test3
</span></div>
<div id="links_2">
<span >Test4</span>
</div></li>

answered Oct 15, 2019 at 5:08

Bilal Siddiqui

3,6491 gold badge16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abhishek Sarwan · Accepted Answer · 2019-10-15 05:19:49Z

0

Change id and structure accordingly.

<li>
   <div id="image_1" onclick="showOrHide(1)">
      <span>Test1
      </span>
   </div>
   <div id="links_1">
      <span >Test2</span>
   </div>
</li>
<li>
   <div id="image_2" onclick=" showOrHide(2)">
      <span>Test3
      </span>
   </div>
   <div id="links_2">
      <span >Test4</span>
   </div>
</li>

JavaScript:

function showOrHide(rowNumber) 
{ if (window.innerWidth < 800) { 

    var div = document.getElementById("links_"+ rowNumber);
    if (div.style.display == "block") 
    {
        div.style.display = "none";
    }
    else 
    {
        div.style.display = "block";
    }
                               }
}

edited Oct 15, 2019 at 5:19

answered Oct 15, 2019 at 5:08

Abhishek Sarwan

664 bronze badges

Comments

MD.Tabish Mahfuz · Accepted Answer · 2019-10-15 05:20:12Z

Just provide a parameter to your showOrHide function which will be the selector for your div and do the toggling to that selector. See the implementation below

<li>
    <div id="image" onclick="showOrHide('#links_1')">
        <span>Test1</span>
    </div>
    <div id="links_1">
        <span >Test2</span>
    </div> 
</li>
<li>
    <div id="image" onclick=" showOrHide('#links_2')">
        <span>Test3</span>
    </div>
    <div id="links_2">
        <span >Test4</span>
    </div>
</li>

And the JS:

function showOrHide(divSelector) 
{ 
    var div = document.querySelector(divSelector);
    if (div.style.display == "none") 
    {
        div.style.display = "block";
    }
    else 
    {
        div.style.display = "none";
    }
}

Paaarth · Accepted Answer · 2019-10-15 05:20:53Z

0

var elems = document.getElementsByClassName("links");
Array.from(elems).forEach(v => v.addEventListener('click', function() {
  this.parentElement.getElementsByClassName('links')[0].classList.toggle('hidden');
}));

.hidden {
  display: none;
}

<li>
  <div class="links">
    <span>Test1 </span>
  </div>
  <div class="links">
    <span>Test2</span>
  </div>
</li>
<li>
  <div class="links">
    <span>Test3
</span></div>
  <div class="links">
    <span>Test4</span>
  </div>
</li>

answered Oct 15, 2019 at 5:20

Paaarth

4,4693 gold badges26 silver badges39 bronze badges

Comments

Nick Parsons · Accepted Answer · 2019-10-15 05:24:10Z

Your main issue here is that an element's id must be unique to that element. Other elements cannot have the same id. Instead, you can pass through the element into your showOrHide() method using this, and then get the next element using nextElementSibling. This will work provided your HTML structure is consistent:

function showOrHide(elem) {
  if (window.innerWidth < 800) {
    const div = elem.nextElementSibling;
    if (!div.style.display || div.style.display == "block") {
      div.style.display = "none";
    } else {
      div.style.display = "block";
    }
  }
}

<li>
  <div id="image" onclick="showOrHide(this)">
    <span>Test1</span>
  </div>
  <div class="links">
    <span>Test2</span>
  </div>
</li>
<li>
  <div id="image" onclick=" showOrHide(this)">
    <span>Test3</span>
  </div>
  <div class="links">
    <span>Test4</span>
  </div>
</li>

Yogesh Shrimali · Accepted Answer · 2019-10-15 05:34:47Z

0

You can not use the same id lots of time on same HTML. Id attribute is unique, but you can use class. You can use this code maybe it will help you.

<li>
<div class="image" onclick="showOrHide(this)">
<span>Test1
</span></div>
<div class="links">
<span >Test2</span>
</div></li>
<li>
<div class="image" onclick=" showOrHide(this)">
<span>Test3
</span></div>
<div class="links">
<span >Test4</span>
</div></li>

function showOrHide(element) {
    if (window.innerWidth < 800) {

        var div = element.closet(".links");
        if (div.style.display == "block") {
            div.style.display = "none";
        } else {
            div.style.display = "block";
        }
    }
}

answered Oct 15, 2019 at 5:34

Yogesh Shrimali

3902 silver badges14 bronze badges

Collectives™ on Stack Overflow

Show/hide div with javascript

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related