Draw lines in accordion

Question

I have accordion inside accordion. I want to draw vertical line from accordion's header to the last child accordion's element and horizontal lines from vertical line to each child accordion's element.

Here is what I have:

<div id="accordion3" class="collapseblock">
  <div class="cardsmall">
    <div class="cardsmall-header">
      <span class="arrowed" id="headingGeneral" data-toggle="collapse" data-target="#collapseGeneralTab" aria-expanded="false" aria-controls="collapseGeneralTab">
                                        Test1
                                    </span>
    </div>
    <div id="collapseGeneralTab" class="collapse" aria-labelledby="headingGeneral" data-parent="#accordion3">
      <div class="cardsmall-content">
        Example1
      </div>
    </div>
  </div>
  <div class="cardsmall">
    <div class="cardsmall-header">
      <span class="arrowed" id="headingCurrency" data-toggle="collapse" data-target="#collapseCurrency" aria-expanded="false" aria-controls="collapseCurrency">
                                        Test2
                                    </span>
    </div>
    <div id="collapseCurrency" class="collapse" aria-labelledby="headingCurrency" data-parent="#accordion3">
      <div class="cardsmall-content">
        <div id="accordion4" class="collapseblock">
          <div class="cardsmall">
            <div class="cardsmall-header">
              <span class="arrowed" id="headingOffers" data-toggle="collapse" data-target="#collapseOffers" aria-expanded="false" aria-controls="collapseOffers">
                                                        Test2.1
                                                    </span>
            </div>
            <div id="collapseOffers" class="collapse" aria-labelledby="headingOffers" data-parent="#accordion4">
              <div class="cardsmall-content">
                Example2.1
              </div>
            </div>
          </div>

          <div class="cardsmall">
            <div class="cardsmall-header">
              <span class="arrowed" id="headingPricing" data-toggle="collapse" data-target="#collapsePricing" aria-expanded="false" aria-controls="collapsePricing">
                                                        Test2.2
                                                    </span>
            </div>
            <div id="collapsePricing" class="collapse" aria-labelledby="headingPricing" data-parent="#accordion4">
              <div class="cardsmall-content">
                Example2.2
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

JSFiddle

What I want to get:

How can I achieve this?

Answer 1

Here is an idea using some background and pseudo element. You will probably need some adjustments in case of multiline content or more nested element.

.cardsmall {
  background: linear-gradient(#000,#000) 5px calc(100% - 16px)/2px calc(100% - 40px)  no-repeat;
  display: table;
  margin-bottom: 3px;
  margin-left: 20px;
  margin-top: 10px;
}
.cardsmall .cardsmall {
  margin-top: 0;
}
 .cardsmall {
  position:relative;
}
.cardsmall  .cardsmall:before {
    content: "";
    position: absolute;
    top: 13px;
    right: calc(100% + 3px);
    width: 30px;
    height: 2px;
    background: #000;
}
.cardsmall .cardsmall:last-child:after {
    content: "";
    position: absolute;
    top: 15px;
    right: calc(100% + 5px);
    width: 30px;
    height: 100vh;
    background: #fff;
}
.cardsmall-header .arrowed {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.cardsmall-header .arrowed:after {
  content: "\f078";
  display: inline-block;
  font-family: 'FontAwesome';
  position: relative;
  right: 0;
  transition: all 0.3s;
}

.arrowed[aria-expanded="true"]:after {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}

.cardsmall-header {
  border-radius: calc(.25rem - 1px);
}

.cardsmall-content {
  padding: 10px 5px 5px 20px;
  background:linear-gradient(#000,#000) 5px 23px/12px 2px no-repeat;
      overflow: hidden;
}

.collapseblock {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div id="accordion3" class="collapseblock">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <div class="cardsmall">
    <div class="cardsmall-header">
      <span class="arrowed" id="headingTest1" data-toggle="collapse" data-target="#collapseTest1Tab" aria-expanded="false" aria-controls="collapseTest1Tab">
										Test1
									</span>
    </div>
    <div id="collapseTest1Tab" class="collapse" aria-labelledby="headingTest1" data-parent="#accordion3">
      <div class="cardsmall-content">
        Example1
      </div>
    </div>
  </div>
  <div class="cardsmall">
    <div class="cardsmall-header">
      <span class="arrowed" id="headingTest2" data-toggle="collapse" data-target="#collapseTest2" aria-expanded="false" aria-controls="collapseTest2">
										Test2
									</span>
    </div>
    <div id="collapseTest2" class="collapse" aria-labelledby="headingTest2" data-parent="#accordion3">
      <div class="cardsmall-content">
        <div id="accordion4" class="collapseblock">
          <div class="cardsmall">
            <div class="cardsmall-header">
              <span class="arrowed" id="headingTest21" data-toggle="collapse" data-target="#collapseTest21" aria-expanded="false" aria-controls="collapseTest21">
														Test2.1
													</span>
            </div>
            <div id="collapseTest21" class="collapse" aria-labelledby="headingTest21" data-parent="#accordion4">
              <div class="cardsmall-content">
                Example2.1
              </div>
            </div>
          </div>
          <div class="cardsmall">
            <div class="cardsmall-header">
              <span class="arrowed" id="headingTest22" data-toggle="collapse" data-target="#collapseTest22" aria-expanded="false" aria-controls="collapseTest22">
														Test2.2
													</span>
            </div>
            <div id="collapseTest22" class="collapse" aria-labelledby="headingTest22" data-parent="#accordion4">
              <div class="cardsmall-content">
                Example2.2
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Here is the relevant CSS added:

.cardsmall {
  background: linear-gradient(#000,#000) 5px calc(100% - 16px)/2px calc(100% - 40px)  no-repeat;
  }
.cardsmall .cardsmall {
   margin-top: 0;
}
.cardsmall {
   position:relative;
}
.cardsmall  .cardsmall:before {
    content: "";
    position: absolute;
    top: 13px;
    right: calc(100% + 3px);
    width: 30px;
    height: 2px;
    background: #000;
}
.cardsmall-content {
  background:linear-gradient(#000,#000) 5px 23px/12px 2px no-repeat;
  overflow:hidden; /*needed to hide the overflow of the after element below*/
}

/*This is to hide the line when the last child is expanded*/
.cardsmall .cardsmall:last-child:after {
    content: "";
    position: absolute;
    top: 15px;
    right: calc(100% + 5px);
    width: 30px;
    height: 100vh;
    background: #fff;
}
/**/