CSS Accordion

CSS Accordion

by Tamil

HTML

<div id="toggle-container">
	<div class="toggle-inside">
		<input name="toggle" class="toggle" id="toggle1" type="checkbox"><label for="toggle1">Accordion 1</label>
		<div id="expand1">
			Accordion 1 Content
		</div>
	</div>
	<div class="toggle-inside">
		<input name="toggle" class="toggle" id="toggle2" type="checkbox"><label for="toggle2">Accordion 2</label>
		<div id="expand2">
			Accordion 2 Content
		</div>
	</div>
	<div class="toggle-inside">
		<input name="toggle" class="toggle" id="toggle3" type="checkbox"><label for="toggle3">Accordion 3</label>
		<div id="expand3">
			Accordion 3 Content
		</div>
	</div>
	<div class="toggle-inside">
		<input name="toggle" class="toggle" id="toggle4" type="checkbox"><label for="toggle4">Accordion 4</label>
		<div id="expand4">
			Accordion 4 Content
		</div>
	</div>
	
	
</div>

CSS

#tab-contents {
background-color: rgb(0, 0, 0);
} body {
background-color: rgb(0, 0, 0)!important;
}

.tab-item-active {
background-color: #FFB500!important;
color: #fff!important;
cursor: default!important;
}

.topic-item-active {
cursor: default!important;
color: #fff!important;
background-color: #CC9900!important;
}

.toggle-inside {
    margin-bottom: 10px;
}
.toggle-inside input {
  display: none;
  visibility: hidden;
}
.toggle-inside label {
    display: block;
    padding: 10px 20px;
    color: #ffffff;
    border: 1px solid #E5E5E5;
    margin-bottom: 10px;
    background: #FFB500; 
    cursor: pointer;
    /*font-weight: 300;*/
    font-size: 14px;
    text-align: left;
}
.toggle-inside label:hover {
  /*color: #fff;*/
}

.toggle-inside label:before {
    content: "";
  background: url(https://collab-ts.accenture.com/kxaas/kx.svc/files/91ec0f1d-d204-4395-a0aa-f25a38d45b7e/btn-collapse.png) center center no-repeat;
  text-align: center;
  vertical-align: text-top;
  display: inline-block;
  width: 11px;
  height: 11px;
  padding: 10px;
  float: right;
  transition: all 0.2s ease-in;
}
#expand1, #expand2, #expand3, #expand4, #expand5, #expand6, #expand7, #expand8, 
#expand9, #expand10, #expand11, #expand12, #expand13, #expand14, #expand15, #expand16, #expand17, #expand18, #expand19, #expand20, #expand21, #expand22, #expand23, #expand24, #expand25, #expand26, #expand27, #expand28, #expand29, #expand30, #expand31{
 display:none;
  overflow: hidden;
  transition: height 0.5s;
  color: #fff;
}
#toggle1:checked ~ #expand1, #toggle2:checked ~ #expand2,#toggle3:checked ~ #expand3, #toggle4:checked ~ #expand4, #toggle5:checked ~ #expand5, #toggle6:checked ~ #expand6, #toggle7:checked ~ #expand7, #toggle8:checked ~ #expand8, #toggle9:checked ~ #expand9, #toggle10:checked ~ #expand10, #toggle11:checked ~ #expand11, #toggle12:checked ~ #expand12,
#toggle13:checked ~ #expand13, #toggle14:checked ~ #expand14, #toggle15:checked ~ #expand15, #toggle16:checked ~...