Question 251805 in Html Question posted in
Some basic documentation can be found here.

Html – toggling visibility using Javascript

I am creating a menu using HTML and JavaScript. The layout of the menu is a grid of 3 rows and two columns. Even the contents within the menu are in a grid. Further, when I reduce with width of the screen, the layout changes into a grid of 1 row and 1 column. The idea is that, when the screen size is reduced, the menu contents become invisible and the user has to click on the heading to expand the contents. I wrote a javascript to achieve this. The problem is- when the screen size is reduced, and I click on the heading to expand the contents and click again to collapse the content and increase the screen width, the contents remain to be invisible. I am attaching part of my code below, can anyone tell me how to solve this

const toggleElements = document.querySelectorAll('.toggle');

toggleElements.forEach(toggle => {
  const content = toggle.nextElementSibling;


  toggle.addEventListener('click', () => {
    if (content.style.display === 'none') {
      content.style.display = 'block';
    } else {
      content.style.display = 'none';
    }
  });
});
#assist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 17px;
  white-space: nowrap;
  max-width: 1300px;
}

.toggle {
  font-size: 1.2rem;
}

.content {
  display: block;
  margin-top: 4px;
}

.content a {
  display: grid;
}

#assist .content {
  line-height: 35px;
  margin-bottom: 50px;
}

@media screen and (max-width: 1270px) {
  #assist {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  #assist .content {
    display: none;
  }
}
<div id="assist">
  <div>
    <span class="toggle">Retun Policy</span>
    <div class="content">
      <a href="">What is the retun policy</a>
      <a href="">Test2 </a>
      <a href="">Test 3</a>
    </div>
  </div>
  <div>
    <span class="toggle">Corporate</span>
    <div class="content">
      <a href="">Where can I learn more about company</a>
      <a href="">Test2</a>
      <a href="">Test3</a>
    </div>
  </div>
Tags:

2

Answers


  1. 0

    The problem you face is because the display: none style is applied to the content element, and this style stays even when you increase the screen size.

    To solve this, you could listen to the resize event and change the styles back. You could do something like this:

    const toggleElements = document.querySelectorAll('.toggle');

window.addEventListener('resize', () => {
    toggleElements.forEach((toggle) => {
        const content = toggle.nextElementSibling;

        if (window.innerWidth <= 1270) {
            // hide content
        } else {
            // show content
        }
    });
})
    Login or Signup to reply.
  2. 0

    Just set

    @media (min-width: 1271px) {
  #assist .content {
    display: block!important;
  }
}

    const toggleElements = document.querySelectorAll('.toggle');

toggleElements.forEach(toggle => {
  const content = toggle.nextElementSibling;


  toggle.addEventListener('click', () => {
    if (content.style.display === 'none') {
      content.style.display = 'block';
    } else {
      content.style.display = 'none';
    }
  });
});
    #assist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 17px;
  white-space: nowrap;
  max-width: 1300px;
}

.toggle {
  font-size: 1.2rem;
}

.content {
  display: block;
  margin-top: 4px;
}

.content a {
  display: grid;
}

#assist .content {
  line-height: 35px;
  margin-bottom: 50px;
}

@media screen and (max-width: 1270px) {
  #assist {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  #assist .content {
    display: none;
  }
}

@media (min-width: 1271px) {
  #assist .content {
    display: block!important;
  }
}
    <div id="assist">
  <div>
    <span class="toggle">Retun Policy</span>
    <div class="content">
      <a href="">What is the retun policy</a>
      <a href="">Test2 </a>
      <a href="">Test 3</a>
    </div>
  </div>
  <div>
    <span class="toggle">Corporate</span>
    <div class="content">
      <a href="">Where can I learn more about company</a>
      <a href="">Test2</a>
      <a href="">Test3</a>
    </div>
  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search