Toggle Show/Hide Multiple Elements With Pure JavaScript

May 14, 2015     7 Comments

Front End Design

This is for when you need to toggle between showing and hiding more than one element on a page. For example, click a heading to show a list underneath it, then click again to hide the list. This uses pure JavaScript, no jQuery or other libraries. (See this instead for an example using jQuery.)

You want the event listener to apply to many items, for example, to all the h2 elements on the page. You don’t need to add the event listener multiple times to each element. You add the event listener once, which checks if an h2 element was clicked.

Here is a working example. In this example, the h2 headings have the class "clickable-heading".

 

See more: ,

We've 7 Responses

  4. March 31st, 2021 at 3:40 am

    when i an using this code it dint work and sowing this error in console

    Uncaught TypeError: Cannot read property ‘style’ of null
    at HTMLDocument.toggleDocs

    Reply ↓
    jasvinder

  5. April 17th, 2021 at 4:15 am

    Hi,

    actually there is a way to do that in HTML 5 with no script at all :
    it’s the “details” tag. With a 96% support, that is now my preferred method for toggling elements.

    here’s an example with custom styling:

    <style>
details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: .5em .5em 0;
}
summary {
    font-weight: bold;
    margin: -.5em -.5em 0;
    padding: .5em;
}
details[open] {
    padding: .5em;
}

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: .5em;
}
</style>
<details open>
  <summary>Clickable header with content opened</summary>
  <p>Useful content shown already opened on page load, closes on a click on its header</p>
</details>
<details>
  <summary>Clickable header, opens on licj</summary>
  <p>Useful content shown only when opened</p>
</details>

    Compatibility :
    IE : no,
    Edge : 79+,
    Firefox 49+,
    Chrome 12+,
    Safari : 6+,
    Opera : 15+,
    Safari iOS: 6+,
    Opera mini : no,
    Android Browser: 4+,
    Opera mobile: 62+,
    Chrome Android : 89+
    Firefox Android : 86+,
    Samsung Internet : 4+,
    QQ Browser: 104+,
    Baidu Browser : 7.12+
    KaiOS Browser : 2.5+

    there is a js polyfill for anterior browsers (see on caniuse.com)

    You can also add an event listener to do things on closing an opening

    <script>
details.addEventListener("toggle", event => {
  if (details.open) {
    /* the element was toggled open */
  } else {
    /* the element was toggled closed */
  }
});
<script>

    And the appearance can be customized with css : (this very ugly example from developer.mozilla.org/en-US/docs/Web/HTML/Element/details)

    <style>
details {
  font: 16px "Open Sans", Calibri, sans-serif;
  width: 620px;
}
details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}
details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}
details[open] > summary {
  background-color: #ccf;
}
</style>

    You can event customize the ► (see on the mozilla.org page)

    Reply ↓
    Eric

  6. June 9th, 2021 at 12:52 pm

    This was exactly the simple solution I needed.
    I don’t usually signup to post but resolved a lot of searching.

    Thank you!
    *spam email used of course :))

    Reply ↓
    Authorized User

Questions and Comments are Welcome

Your email address will not be published. All comments will be moderated.

Please wrap code in "code" bracket tags like this:

[code]

YOUR CODE HERE 

[/code]