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.
JavaScript
x
6
1
$(document).ready(function() {2
$('.ui.accordion').accordion();3
4
/* Alternative way to change color of accordion */5
//$(".drop").css("color", "yellow");6
});JavaScript
1
21
21
1
/* this doesn't work*/2
3
.ui.styled.accordion .accordion .title,4
.ui.styled.accordion .title {5
color: black;6
background-color: #eee;7
cursor: pointer;8
padding: 18px;9
width: 100%;10
height: auto;11
border: none;12
text-align: left;13
outline: none;14
font-size: 15px;15
transition: 0.5s;16
}17
18
.ui.styled.accordion .accordion .title,19
.ui.styled.accordion .title:hover {20
color: #f2711c;21
}JavaScript
1
53
53
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>2
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.js" type="text/javascript"></script>3
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.css">4
5
6
<div class="ui stackable grid container">7
<div class="one column row">8
<div class="column">9
<div class="ui styled accordion">10
<!-- Accordion parent -->11
<div class="title"><i class="dropdown icon"></i>Level 2</div>12
<div class="content">13
<div class="ui divider"></div>14
<div class="ui stackable grid container">15
<div class="three column row">16
<div class="column">17
<div class="ui styled accordion">18
<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>19
<div class="content">20
hi21
</div>22
</div>23
</div>24
<div class="column">25
<div class="ui styled accordion">26
<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>27
<div class="content">28
hi29
</div>30
</div>31
</div>32
<div class="column">33
<div class="ui styled accordion">34
<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>35
<div class="content">36
hi37
</div>38
</div>39
</div>40
<div class="column">41
<div class="ui styled accordion">42
<div class="title drop"><i class="dropdown icon"></i>AU.2.044 Review audit logs.</div>43
<div class="content">44
hi45
</div>46
</div>47
</div>48
</div>49
</div>50
</div>51
</div>52
</div>53
</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
JavaScript
1
24
24
1
<div class="ui stackable grid container">2
<div class="one column row">3
<div class="column">4
<div class="ui styled accordion"> <!-- Accordion parent -->5
<div class="title"><i class="dropdown icon"></i>Level 2</div> 6
<div class="content">7
<div class="ui divider"></div>8
<div class="">9
<div class="three column row">10
<div class="column">11
<div class="ui styled accordion">12
<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>13
<div class="content">14
hi15
</div>16
</div>17
</div>18
</div>19
</div>20
</div>21
</div>22
</div>23
</div> 24
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
JavaScript
1
6
1
$(document).ready(function(){2
$('.retro').accordion();3
4
/* Alternative way to change color of accordion */5
//$(".drop").css("color", "yellow");6
});JavaScript
1
18
18
1
/* this doesn't work*/2
.ui.styled.accordion .accordion .title, .ui.styled.accordion .title {3
color: black;4
background-color: #eee;5
cursor: pointer;6
padding: 18px;7
width: 100%;8
height: auto;9
border: none;10
text-align: left;11
outline: none;12
font-size: 15px;13
transition: 0.5s;14
}15
16
.ui.styled.accordion .accordion .title, .ui.styled.accordion .title:hover {17
color: #f2711c;18
}JavaScript
1
52
52
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>2
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.js" type="text/javascript"></script>3
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.css">4
5
6
<div class="ui stackable grid container retro">7
<div class="one column row">8
<div class="column">9
<div class="ui styled accordion"> <!-- Accordion parent -->10
<div class="title"><i class="dropdown icon"></i>Level 2</div> 11
<div class="content">12
<div class="ui divider"></div>13
<div class="ui stackable grid container">14
<div class="three column row">15
<div class="column">16
<div class="ui styled accordion">17
<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>18
<div class="content">19
hi20
</div>21
</div>22
</div>23
<div class="column">24
<div class="ui styled accordion">25
<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>26
<div class="content">27
hi28
</div>29
</div>30
</div>31
<div class="column">32
<div class="ui styled accordion">33
<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>34
<div class="content">35
hi36
</div>37
</div>38
</div>39
<div class="column">40
<div class="ui styled accordion">41
<div class="title drop"><i class="dropdown icon"></i>AU.2.044 Review audit logs.</div>42
<div class="content">43
hi44
</div>45
</div>46
</div>47
</div>48
</div>49
</div>50
</div>51
</div>52
</div>