After removing the first line in the css display: flex !important;, the collapse-expand button functions correctly (click on top of set1), but it removes the in-between dotted line.
However, if I keep the first line in the css display: flex !important;, the collapse-expand feature does not work (click on top of set1), but the in-between dotted line is displayed as expected.
You can view a working fiddle of the same at this link: http://jsfiddle.net/k68frxds/6/
Any suggestions on how to maintain both the dotted lines and the functionality of the collapse expand button? Thank you.
<div class="itemDiv">
<div>
<a class="accordion-button " data-toggle="collapse" data-target=".lev1"> Set1 </a>
<p class ="collapse multi-collapse lev1 show">item1 <span class="DataRightAlign"> Set1val</span></p>
<p class ="collapse multi-collapse lev1 show">item2<span class="DataRightAlign">Set1val</span></p>
</div>
<div>
<a class="accordion-button " data-toggle="collapse" data-target=".lev3">Set2 </a>
<p class="collapse multi-collapse lev3 show"> item3<span class="DataRightAlign">Set2val</span></p>
</div >
</div >
Css:
.lev1,.lev2,.lev3 {
display: flex !important;
align-items: flex-end;
margin-top: 5px;
margin-left: 15px;
}
.lev1:after, .lev2:after, .lev3:after {
content: '';
flex: auto;
min-width: 24px;
margin: 0 6px;
height: 2px;
color: lightgrey;
margin-bottom: 4px;
background-image: linear-gradient(to right,currentColor 2px,transparent 1px);
background-size: 4px 2px;
}
.DataRightAlign {
flex: none;
word-wrap: break-word;
white-space: break-spaces;
max-width: 62%;
float: right;
margin-right: 20px;
margin-left: 10px;
color: black;
}
.DataRightAlign:last-child {
order: 1;
text-align: right;
}