How to make the dotted lines dynamic while having other functionalities (expand- collapse button on click of set1 or set2) intact. Do not want dotted line to go underneath data. So that it starts and ends like a connector between data. Fiddle showing the same: https://jsfiddle.net/vcjzn5hs/1/
Would appreciate your suggestion.
I am able to make dynamic dotted lines and expand-collapse work independently but not together. For your reference: Sample of how dynamic dotted lines should be http://jsfiddle.net/bwpugnd3/11/. But this example does not work along with expand collapse button.
Code snippet:
.flex {
display: flex;
justify-content: space-between;
}
.lev1,
.lev2,
.lev3 {
position: relative;
margin-top: 5px;
margin-left: 15px;
}
.lev1::after,
.lev2::after,
.lev3::after {
content: '';
position: absolute;
width: 80%;
top: 100%;
left: 50%;
transform: translateX(-50%);
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 {
word-wrap: break-word;
white-space: break-spaces;
margin-right: 20px;
margin-left: 10px;
color: black;
}<!--jquery and bootstrap-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="itemDiv">
<div>
<a class="accordion-button " data-toggle="collapse" data-target=".lev1"> Set1 </a>
<div class="collapse multi-collapse lev1 show">
<p class="flex">
<span>item1data</span>
<span class="DataRightAlign"> Set1val here</span>
</p>
</div>
<div class="collapse multi-collapse lev1 show">
<p class="flex">
<span>item2</span>
<span class="DataRightAlign">Set1</span>
</p>
</div>
</div>
<div>
<a class="accordion-button " data-toggle="collapse" data-target=".lev3">Set2 </a>
<div class="collapse multi-collapse lev3 show">
<p class="flex">
<span>item3</span>
<span class="DataRightAlign">Set2val</span>
</p>
</div>
</div>
2
Answers
This is something like table of contents CSS styling
The basic idea is put
content: '...very lengthy and make overflow hidden and make the div background of the left side text and right side text white, so those dots will not visible after or under the right side text or left side text, but actually the dotted line drawn for the entire rowthe
height: 40pxandtop: -42pxfixes the dotted line move slightly below the the left side text and right side textthe
z-index: -1;make the dotted line hide behind the right side text and left side textOne approach, and frankly the easiest, is below with explanatory comments in the code; please note that I removed all CSS from your own demo because it made it slightly easier to create the demo, but – of course – there’s nothing to stop you adding your own CSS back:
JS Fiddle demo.
An alternative is to use a CSS generated content to hold the leading (the dots that lie between the item-data and set-value), this has problems though; again, explanatory comments are in the code:
JS Fiddle demo.
Unfortunately, the use of:
means that we can no longer style the element with
background-color, orborderand so on; this is an unavoidable consequence of this approach.Finally, though, and thought of rather later than I’d like, we have the option of nesting flex-layouts as follows:
JS Fiddle demo.
References:
background.background-image.background-position.background-size.block-size.calc().clamp().content.display.flex-grow.gap.justify-content.margin.margin-inline.repeating-linear-gradient().