Jump to content
jorisdw

Question about accordeons

Recommended Posts

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

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...