Question about accordeons

jorisdw · August 9, 2019

Hello,

I' trying to make an hierarchy in collapsibles.

For example: open a first section, and in that subsection 3 new collapsibles should appear.

I've managed to figure out somewhat how this should work. However, I am not able to make the second level collapsibles "collapse".

HTML is quite new for me so, is there someone who could help me out with this?

I add a file in attachment with the code I have so for.

Thanks & kind regards,

Joris

test.html

JMRKER · August 17, 2019

Not sure if this is the actual look-and-feel of what you are trying to do,

but see if this is closer that what you have posted.

	<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- From: http://w3schools.invisionzone.com/topic/59812-question-about-accordeons/ -->
	<style>
 .hide { display: none; }
 .collapsible {
   background-color: #777;
   color: white;
   cursor: pointer;
   padding: 18px;
   width: 100%;
   border: none;
   text-align: left;
   outline: none;
   font-size: 15px;
 }
 .active,
 .collapsible:hover {
   background-color: #555;
 }
	 .collapsible:after {
   content: '\002B';
   color: white;
   font-weight: bold;
   float: right;
   margin-left: 5px;
 }
 .active:after {
   content: "\2212";
 }
 .content,
 .subcontent {
   padding: 0 18px;
   transition: max-height 0.2s ease-out;
   background-color: #f1f1f1;
 }
</style>
	</head>
<body>
	<h2>Collapsibles</h2>
	<p>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content hide">
	  <p>Bit of intro text.</p>
	<!-- sub sections -->
	  <button class="collapsible">Open SubSection 1</button>
  <div class="subcontent hide">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
	  <button class="collapsible">Open SubSection 2</button>
  <div class="subcontent hide">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
	  <button class="collapsible">Open SubSection 3</button>
  <div class="subcontent hide">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
	<!-- end subsections -->
</div>
	<button class="collapsible">Open Section 2</button>
<div class="content hide">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
  </p>
</div>
	<button class="collapsible">Open Section 3</button>
<div class="content hide">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
  </p>
</div>
	
<script>
var coll = document.getElementsByClassName("collapsible");
	for (let i = 0; i < coll.length; i++) {
  coll[i].addEventListener(
    "click",
    function() {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      content.classList.toggle('hide');
    }
  );
}
</script>
	</body>
</html>

dsonesuk · August 17, 2019

As the clicking of button only affect its sibling content, just add sub sections to parent section

https://www.w3schools.com/code/tryit.asp?filename=G74466AIJUKS

Sign In

Question about accordeons

Recommended Posts

jorisdw

Link to comment

Share on other sites

JMRKER

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity