I have according that is working fine when I put content in between "accordion-panel-ihe" section but when I put list item in same section then the accordion stop working, I have tried with list and tried with using p tag in same section but not working, below complete code of my accordion, , please check...thanks for advance
$(function() {
$(".accordion-ihe > .accordion-item-ihe.is-active").children(".accordion-panel-ihe").slideDown();
$(".accordion-ihe > .accordion-item-ihe").click(function() {
$(this).siblings(".accordion-item-ihe").removeClass("is-active").children(".accordion-panel-ihe").slideUp();
$(this).toggleClass("is-active").children(".accordion-panel-ihe").slideToggle("ease-out");
});
});.accordion-ihe {
margin: 1rem 0;
padding: 0;
list-style: none;
}
.accordion-thumb-ihe {
margin: 0;
padding: 0.4rem 0;
cursor: pointer;
font-weight: normal;
color:#009297;
}
.accordion-thumb-ihe::before {
content: "";
display: inline-block;
height: 7px;
width: 7px;
margin-right: 1rem;
margin-left: 0.5rem;
vertical-align: middle;
border-right: 1px solid;
border-bottom: 1px solid;
transform: rotate(-45deg);
transition: transform 0.2s ease-out;
}
.accordion-panel-ihe {
margin: 0;
padding-bottom: 0.8rem;
display: none;
}
.accordion-item-ihe.is-active .accordion-thumb-ihe::before {
transform: rotate(45deg);
}
.accordion-panel-ihe li{
background: url("../images/icon/list-icon.png") no-repeat left 0px top 8px;
padding-left: 2em;
font-size: 1.0em;
line-height: 25px;
color:#009297;
}<ul class="accordion-ihe">
<li class="accordion-item-ihe is-active">
<p class="accordion-thumb-ihe">Heading</p>
<p class="accordion-panel-ihe">
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
</ul>
</p>
</li>
<li class="accordion-item-ihe">
<p class="accordion-thumb-ihe">Heading</p>
<p class="accordion-panel-ihe">
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
</ul>
</p>
</li>
<li class="accordion-item-ihe">
<p class="accordion-thumb-ihe">Heading</p>
<p class="accordion-panel-ihe">
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
</ul>
</p>
</li>
</ul>CodePudding user response：
The problem is this code:
<p class="accordion-panel-ihe">
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
</ul>
</p>
If you inspect the rendered html, you can see the ul is moved out of the p, because that is not valid html.
So use this:
<div class="accordion-panel-ihe">
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
</ul>
</div>
You can read more here.
Demo