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

Html – How to make a clickable vertical accordion?

I am making a website for my master’s course, and I wanted to make a vertical clickable accordion mechanism. The ideia is to click in every section and it expands with more information.
So far, I’ve just made it with the hover mechanism using CSS. How can I make it clickable and use JS? If someone could help me, I would really appreciate it.

body {
  width  : 100vw;
  height : 100vh;
  margin : 0;
  }
ul,
li {
  margin     : 0;
  padding    : 0;
  list-style : none;
  }
ul {
  display  : flex;
  overflow : hidden;
  height   : 100vh;
  width    : 100vw;
  }
li {
  overflow-y         : scroll;
  overflow           : auto;
  -webkit-box-flex   : 1;
  -webkit-flex       : 1;
  -ms-flex           : 1;
  flex               : 1;
  width              : 8.3vw;
  height             : calc(100% - 1%);
  -webkit-transition : -webkit-box-flex 500ms ease-out;
  -webkit-transition : -webkit-flex 500ms ease-out;
  transition         : -webkit-box-flex 500ms ease-out;
  transition         : -ms-flex 500ms ease-out;
  transition         : flex 500ms ease-out;
  padding            : 20px;
  -webkit-box-shadow : 2px 0px 4px -1px rgba(0, 0, 0, 0.66);
  -moz-box-shadow    : 2px 0px 4px -1px rgba(0, 0, 0, 0.66);
  box-shadow         : 2px 0px 4px -1px rgba(0, 0, 0, 0.66);
  }
li:hover {
  -webkit-box-flex : 30vw;
  -webkit-flex     : 30vw;
  -ms-flex         : 30vw;
  flex             : 30vw;
  }
.projects {
  width         : 30vw;
  height        : auto;
  margin-bottom : 5vh;
  }

/* ------- PARAGRAPH STYLES ------- */

a {
  text-decoration : none;
  color           : black;
  }
a:hover {
  opacity : 0.5;
  }
.maintitle {
  width          : 100%;
  font-size      : 30px;
  text-transform : uppercase;
  font-family    : Arial, Helvetica, sans-serif;
  }
.subtitle {
  width       : 150vw;
  font-size   : 20px;
  font-family : Arial, Helvetica, sans-serif;
  }
img {
  padding-top : 20px;
  width       : 25vh;
  height      : auto;
  }
<!DOCTYPE html>
<html lang="en">

<head>
  <title> MDC 22-23 </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">

</head>

<body>

  <ul>
    <!-- MICRO-1-->
    <li ">
            <div class="projects ">
                <a href="matilde/matilde.html ">
                    <div class="maintitle "> Networked Infrastructures</div>
                    <div class="subtitle "> Three geographies (environmental, economic, political)</div>
                    <img src="gif5.gif "></div> 
                </a>
            </div>

            <div class="projects "></div>
                <a href="matilde/matilde.html ">
                    <div class="maintitle "> Networked Infrastructures</div>
                    <div class="subtitle "> Three geographies (environmental, economic, political)</div>
                    <img src="gif5.gif "></div> 
                </a>
            </div>

            <div class="projects "></div>
                <a href="matilde/matilde.html ">
                    <div class="maintitle "> Networked Infrastructures</div>
                    <div class="subtitle "> Three geographies (environmental, economic, political)</div>
                    <img src="gif5.gif "></div> 
                </a>
            </div>
          
         
        </li>

        <!-- PROJECT 2-->
       
        <li>
            <div class="projects ">
                <a href="matilde/matilde.html ">
                    <div class="maintitle "> Networked Infrastructures</div>
                    <div class="subtitle "> Three geographies (environmental, economic, political)</div>
                    <img src="gif5.gif "></div> 
                </a>
            </div>

            <div class="projects "></div>
                <a href="matilde/matilde.html ">
                    <div class="maintitle "> Networked Infrastructures</div>
                    <div class="subtitle "> Three geographies (environmental, economic, political)</div>
                    <img src="gif5.gif "></div> 
                </a>
            </div>

            <div class="projects "></div>
                <a href="matilde/matilde.html ">
                    <div class="maintitle "> Networked Infrastructures</div>
                    <div class="subtitle "> Three geographies (environmental, economic, political)</div>
                    <img src="gif5.gif "></div> 
                </a>
            </div>
        </li>

        <!-- PROJECT 3 -->

        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
    </ul>

  
</body>
</html>

So far, I’ve just made it with the hover mechanism using CSS. How can I make it clickable and use JS? Also could i make every with infinite auto scroll? If someone could help me, I would really appreciate it.

Tags:

2

Answers


  1. 0

    I think this should work. Basically I have just replaced your li:hover selector with li.selected. Now it just uses some simple JS to add/remove that selected class when you click on an <li> tag.

    NOTE: I dorrected quite a few syntax errors that commentors above have mentioned. I also removed all of those -webkit-, -moz- and -ms- prefixed items as those are largely no longer needed.

    const listItems = document.querySelectorAll("li");

for (let i = 0; i < listItems.length; i++) {
  listItems[i].addEventListener("click", () => {
    unselectAll()
    listItems[i].classList.add("selected");
  }, false);
};

function unselectAll(){
  for (let i = 0; i < listItems.length; i++) {
    listItems[i].classList.remove("selected");
  };
}
    body {
  width: 100vw;
  height: 100vh;
  margin: 0;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul {
  display: flex;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

li {
  overflow-y: scroll;
  overflow: auto;
  flex: 1;
  width: 8.3vw;
  height: calc(100% - 1%);
  transition: flex 500ms ease-out;
  padding: 20px;
  box-shadow: 2px 0px 4px -1px rgba(0, 0, 0, 0.66);
}

li.selected {
  flex: 30vw;
}

.projects {
  width: 30vw;
  height: auto;
  margin-bottom: 5vh;
}


/* ------- PARAGRAPH STYLES ------- */

a {
  text-decoration: none;
  color: black;
}

a:hover {
  opacity: 0.5;
}

.maintitle {
  width: 100%;
  font-size: 30px;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
}

.subtitle {
  width: 150vw;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
}

img {
  padding-top: 20px;
  width: 25vh;
  height: auto;
}
      <ul>
    <!-- MICRO-1-->
    <li>
        <div class="projects ">
            <a href="matilde/matilde.html ">
                <div class="maintitle "> Networked Infrastructures</div>
                <div class="subtitle "> Three geographies (environmental, economic, political)</div>
                <img src="gif5.gif ">
            </a>
        </div>

        <div class="projects ">
            <a href="matilde/matilde.html ">
                <div class="maintitle "> Networked Infrastructures</div>
                <div class="subtitle "> Three geographies (environmental, economic, political)</div>
                <img src="gif5.gif ">
            </a>
        </div>

        <div class="projects ">
            <a href="matilde/matilde.html ">
                <div class="maintitle "> Networked Infrastructures</div>
                <div class="subtitle "> Three geographies (environmental, economic, political)</div>
                <img src="gif5.gif ">
            </a>
        </div>
    </li>

    <!-- PROJECT 2-->

    <li>
        <div class="projects ">
            <a href="matilde/matilde.html ">
                <div class="maintitle "> Networked Infrastructures</div>
                <div class="subtitle "> Three geographies (environmental, economic, political)</div>
                <img src="gif5.gif ">
            </a>
        </div>

        <div class="projects ">
            <a href="matilde/matilde.html ">
                <div class="maintitle "> Networked Infrastructures</div>
                <div class="subtitle "> Three geographies (environmental, economic, political)</div>
                <img src="gif5.gif ">
            </a>
        </div>

        <div class="projects ">
            <a href="matilde/matilde.html ">
                <div class="maintitle "> Networked Infrastructures</div>
                <div class="subtitle "> Three geographies (environmental, economic, political)</div>
                <img src="gif5.gif ">
            </a>
        </div>
    </li>

    <!-- PROJECT 3 -->

    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
</ul>
    Login or Signup to reply.
  2. 0

    your question is vague.
    If you have to use a click to select a pane of your accordion, what happens to the hover on the others elements?

    Here is an answer that combines the two
    the hover has priority over the click, but the pane opened with a click remains open outside of any hovering of the set.

    you just have to put as a selector:

    ul#vertical-accordion:not(:hover) li.selected,
li:hover {
   ...

    Optionnaly you can add

    ul#vertical-accordion:hover li.selected {
  background-color: #f8d0d8;
  }

    to check the current selected element during any over.

    For the JS side, do not neglect the particularities of the method .classList.toggle()
    1- it returns a boolean value
    2- it allows optionally to force or not the assignment of a class

    full code:

    document.querySelectorAll('ul#vertical-accordion > li').forEach( (li,_,all) =>
  {
  li.onclick =_=>
    {
    if (li.classList.toggle('selected'))
      {
      all.forEach( aLi => aLi.classList.toggle('selected',aLi===li));
      }
    }  
  });
    body {
  width  : 100vw;
  height : 100vh;
  margin : 0;
  }
ul,
li {
  margin     : 0;
  padding    : 0;
  list-style : none;
  }
ul {
  display  : flex;
  overflow : hidden;
  height   : 100vh;
  width    : 100vw;
  }
li {
  overflow-y         : scroll;
  overflow           : auto;
  -webkit-box-flex   : 1;
  -webkit-flex       : 1;
  -ms-flex           : 1;
  flex               : 1;
  width              : 8.3vw;
  height             : calc(100% - 1%);
  -webkit-transition : -webkit-box-flex 500ms ease-out;
  -webkit-transition : -webkit-flex 500ms ease-out;
  transition         : -webkit-box-flex 500ms ease-out;
  transition         : -ms-flex 500ms ease-out;
  transition         : flex 500ms ease-out;
  padding            : 20px;
  -webkit-box-shadow : 2px 0px 4px -1px rgba(0, 0, 0, 0.66);
  -moz-box-shadow    : 2px 0px 4px -1px rgba(0, 0, 0, 0.66);
  box-shadow         : 2px 0px 4px -1px rgba(0, 0, 0, 0.66);
  }

ul#vertical-accordion:not(:hover) li.selected,
li:hover {
  -webkit-box-flex : 30vw;
  -webkit-flex     : 30vw;
  -ms-flex         : 30vw;
  flex             : 30vw;
  }
ul#vertical-accordion:hover li.selected {
  background-color: #f8d0d8;
  }
.projects {
  width         : 30vw;
  height        : auto;
  margin-bottom : 5vh;
  }

/* ------- PARAGRAPH STYLES ------- */

a {
  text-decoration : none;
  color           : black;
  }
a:hover {
  opacity : 0.5;
  }
.maintitle {
  width          : 100%;
  font-size      : 30px;
  text-transform : uppercase;
  font-family    : Arial, Helvetica, sans-serif;
  }
.subtitle {
  width       : 150vw;
  font-size   : 20px;
  font-family : Arial, Helvetica, sans-serif;
  }
/* ---removed for this sample  
img {
  padding-top : 20px;
  width       : 25vh;
  height      : auto;
  }
*/
    <ul id="vertical-accordion">
  <!-- MICRO-1-->
  <li>
    <div class="projects ">
      <a href="matilde/matilde.html ">
        <div class="maintitle "> Networked Infrastructures</div>
        <div class="subtitle "> Three geographies (environmental, economic, political)</div>
        <!-- img src="gif5.gif " -->
        <img src="https://picsum.photos/200/100?random=1">
      </a>
    </div>

    <div class="projects ">
      <a href="matilde/matilde.html ">
        <div class="maintitle "> Networked Infrastructures</div>
        <div class="subtitle "> Three geographies (environmental, economic, political)</div>
        <!-- img src="gif5.gif " -->
        <img src="https://picsum.photos/200/100?random=2">
      </a>
    </div>

    <div class="projects ">
      <a href="matilde/matilde.html ">
        <div class="maintitle "> Networked Infrastructures</div>
        <div class="subtitle "> Three geographies (environmental, economic, political)</div>
        <!-- img src="gif5.gif " -->
        <img src="https://picsum.photos/200/100?random=3">
      </a>
    </div>
  </li>

  <!-- PROJECT 2-->

  <li>
    <div class="projects ">
      <a href="matilde/matilde.html ">
        <div class="maintitle "> Networked Infrastructures</div>
        <div class="subtitle "> Three geographies (environmental, economic, political)</div>
        <!-- img src="gif5.gif " -->
        <img src="https://picsum.photos/200/100?random=4">
      </a>
    </div>
    <div class="projects ">
      <a href="matilde/matilde.html ">
        <div class="maintitle "> Networked Infrastructures</div>
        <div class="subtitle "> Three geographies (environmental, economic, political)</div>
        <!-- img src="gif5.gif " -->
        <img src="https://picsum.photos/200/100?random=5">
      </a>
    </div>
    <div class="projects ">
      <a href="matilde/matilde.html ">
        <div class="maintitle "> Networked Infrastructures</div>
        <div class="subtitle "> Three geographies (environmental, economic, political)</div>
        <!-- img src="gif5.gif " -->
        <img src="https://picsum.photos/200/100?random=6">
      </a>
    </div>
  </li>

  <!-- PROJECT 3 -->

  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search