I am currently working on a HTML dropdown with Accordion & jQuery. For example in the snippet below, I have AU Controls with different levels. I want to organize parent rows with the level rank, and then the appropriate controls under each Level Parent row.
$(document).ready(function() {
$('.ui.accordion').accordion();
/* Alternative way to change color of accordion */
//$(".drop").css("color", "yellow");
});/* this doesn't work*/
.ui.styled.accordion .accordion .title,
.ui.styled.accordion .title {
color: black;
background-color: #eee;
cursor: pointer;
padding: 18px;
width: 100%;
height: auto;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.5s;
}
.ui.styled.accordion .accordion .title,
.ui.styled.accordion .title:hover {
color: #f2711c;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.css">
<div class="ui stackable grid container">
<div class="one column row">
<div class="column">
<div class="ui styled accordion">
<!-- Accordion parent -->
<div class="title"><i class="dropdown icon"></i>Level 2</div>
<div class="content">
<div class="ui divider"></div>
<div class="ui stackable grid container">
<div class="three column row">
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.041 Ensure that the actions of individual system users can be uniquely traced to those users so they can be held accountable for their actions.</div>
<div class="content">
hi
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.042 Create and retain system audit logs and records to the extent needed to enable the monitoring, analysis, investigation, and reporting of unlawful or unauthorized system activity.</div>
<div class="content">
hi
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.043 Provide a system capability that compares and synchronizes internal system clocks with an authoritative source to generate time stamps for audit records.</div>
<div class="content">
hi
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.044 Review audit logs.</div>
<div class="content">
hi
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>UPDATE: I have figured out the nesting issue and was able to fix that. Now the issues I am having, is what I presume to be with the jQuery. When I run my test case in JSFiddle, the parent row opens, and contains all of the correct child rows that I wanted in it. When I try to open the child rows, they open for a half a second, then immediately collapse.
Advertisement
Answer
Ok after testning and reading the documentation, I found the problem.
You are bounding multiple nested divs with accordion
Now lets see your html and try to figure out the problem.
This is your original Html
<div class="ui stackable grid container">
<div class="one column row">
<div class="column">
<div class="ui styled accordion"> <!-- Accordion parent -->
<div class="title"><i class="dropdown icon"></i>Level 2</div>
<div class="content">
<div class="ui divider"></div>
<div class="">
<div class="three column row">
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.041 Ensure that the actions of individual system users can be uniquely traced to those users so they can be held accountable for their actions.</div>
<div class="content">
hi
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Now if you look closely, you will see more then one div that containe .ui.accordion
which trigger the problem.
the best solution is to give the div(ui stackable grid container) a new class or Id and try to bind it with this id instead.
Here is the result
$(document).ready(function(){
$('.retro').accordion();
/* Alternative way to change color of accordion */
//$(".drop").css("color", "yellow");
});/* this doesn't work*/
.ui.styled.accordion .accordion .title, .ui.styled.accordion .title {
color: black;
background-color: #eee;
cursor: pointer;
padding: 18px;
width: 100%;
height: auto;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.5s;
}
.ui.styled.accordion .accordion .title, .ui.styled.accordion .title:hover {
color: #f2711c;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.css">
<div class="ui stackable grid container retro">
<div class="one column row">
<div class="column">
<div class="ui styled accordion"> <!-- Accordion parent -->
<div class="title"><i class="dropdown icon"></i>Level 2</div>
<div class="content">
<div class="ui divider"></div>
<div class="ui stackable grid container">
<div class="three column row">
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.041 Ensure that the actions of individual system users can be uniquely traced to those users so they can be held accountable for their actions.</div>
<div class="content">
hi
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.042 Create and retain system audit logs and records to the extent needed to enable the monitoring, analysis, investigation, and reporting of unlawful or unauthorized system activity.</div>
<div class="content">
hi
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.043 Provide a system capability that compares and synchronizes internal system clocks with an authoritative source to generate time stamps for audit records.</div>
<div class="content">
hi
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.044 Review audit logs.</div>
<div class="content">
hi
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>