Accordion Menu

This shows the HTML, CSS and Javascript required to make an expanding and collapsing Accordion Menu.

CSS:

.topic {
    background: #FE65F6;
    cursor: pointer;
    line-height: 35px;
    width: 100%;
    border-radius: 4px;
}

.topic.active, .topic:hover {
    background: #F7B0F3;
}

.content {
    margin: 2px 0 0 10px;
    padding: 0 6px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

#container {
    width:300px;
    float:right;
}

HTML:

<div id="container">
    <button class="topic" onclick="show('0')">Topic line 1</button>
    <div id="content0" class="content">
          <p>Put the contents of the dropdown here for topic 1</p>
    </div>

    <button class="topic" onclick="show('1')">Topic line 2</button>
    <div id="content1" class="content">
        <p>Put the contents of the dropdown here for topic 2</p>
    </div>

    <button class="topic" onclick="show('2')">Topic line 3</button>
    <div id="content2" class="content">
        <p>Put the contents of the dropdown here for topic 3</p>
    </div>
</div>

Javascript Option 1 (using the ternary operator):

function show(id) {
  for (i = 0; i < document.getElementsByClassName("topic").length; i++) {
    id == i ? "500px" == document.getElementById("content" + id).style.maxHeight ? 
		document.getElementById("content" + id).style.maxHeight = "0px" : 
		document.getElementById("content" + id).style.maxHeight = "500px" : 
		document.getElementById("content" + i).style.maxHeight = "0px";
  }
}

The option 2 function below uses standard if-else notation. These two functions do the same thing. Option 1 is a little smaller, Option 2 may be easier to understand.

Javascript Option 2 (using the standard if-else notation)

// this function is the same as the one above
function show(id) {
    for (i=0; i<document.getElementsByClassName("topic").length; i++) {
        if (id == i) {
            if (document.getElementById("content" + id).style.maxHeight == "500px") {
                document.getElementById("content" + id).style.maxHeight = "0px";
            } else {
                document.getElementById("content" + id).style.maxHeight = "500px"
            }
        } else {
            document.getElementById("content" + i).style.maxHeight = "0px";
        }
    }
}

Example:

All contents of the accordion are initially hidden. The menu bars are stacked, one on the other. When clicked the contents of the menu expand to show the additional information related to the menu topic.

- There's a container which holds all the menu topics
- There's the accordion topic which responds when clicked
- And the additional content which is displayed when the topic is clicked.

Loop through each element. If the element number equals the loop increment the content is given a maxHeight of (arbitrary) 500px. If the content is already 500px maxHeight that means it needs to collapse. All other content elements are collapsed to 0px maxHeight.

The accordion menu is a system where several captions are visible. When clicked, it expands like an accordion displaying the contents of the caption. The contents can be additional links or text further clarifying the caption.

The accordion menu gives your users control over what they see, depending on their interests. It is an excellent pattern for progressively exposing information or details based on the users interests.

The accordion menu responds immediately when the user clicks. There is no wasted time for the user. Information or additional links become available immediately. This contributes to the positive experience for the user.

 

 

 

 

 

Copyright © Lage.us Website Development | Disclaimer | Privacy Policy | Terms of Use