Bootstrap 4 , Pata-Editor

bootstrap-4-pata-editor.markdown

Bootstrap 4 , Pata-Editor

A Pen by PolarFox on CodePen.

License.

index.html

<div class="container-fluid">
<div class="row">
  <div class="col-md-3">
    <div class="card">
      <div class="card-body">
        <div class="card-title">Tarkistuspiste 1</div>
        <p class="card-text">
        Aktiivisen tarkistuspisteen kuvaus ja muita tietoja.
        </p>
      </div>
    </div>
  </div>
  <div class="col-md-9">
    <div id="accordion">
  <div class="card">
    <div class="card-header" id="heading-1">
      <h5 class="mb-0">
        <a role="button" data-toggle="collapse" href="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
          Tarkistuspiste 1
        </a>
      </h5>
    </div>
    <div id="collapse-1" class="collapse show" data-parent="#accordion" aria-labelledby="heading-1">
      <div class="card-body">

        <div id="accordion-1">
          <div class="card">
            <div class="card-header" id="heading-1-1">
              <h5 class="mb-0">
                <a class="collapsed" role="button" data-toggle="collapse" href="#collapse-1-1" aria-expanded="false" aria-controls="collapse-1-1">
                  Muuttuja 1
                </a>
              </h5>
            </div>
            <div id="collapse-1-1" class="collapse" data-parent="#accordion-1" aria-labelledby="heading-1-1">
              <div class="card-body">
                <p class="card-text">Muuttujan selite.</p>
                <h5>Arvot</h5>
                  <ul class="list"><li>
                    <div class="input-group"><input class="form-control variable" type="text" value="1234"><span><i style="right: 1.5em;position:relative;color:red;" class="fa fa-times-circle"  aria-hidden="true"></i></span></div></li>
                    <li>
                      <div class="input-group"><input class="form-control variable" type="text" value="1244"/><span><i style="right: 1.5em;position:relative;color:red;" class="fa fa-times-circle"  aria-hidden="true"></i></span></div>
                    </li></ul>
              </div>   </div>                       
          <div class="card">
            <div class="card-header" id="heading-1-2">
              <h5 class="mb-0">
                <a class="collapsed" role="button" data-toggle="collapse" href="#collapse-1-2" aria-expanded="false" aria-controls="collapse-1-2">
                  Muuttuja 2
                </a>
              </h5>
            </div>
            <div id="collapse-1-2" class="collapse" data-parent="#accordion-1" aria-labelledby="heading-1-2">
              <div class="card-body">
                Muuttujan selite.
              </div>
            </div>
          </div>
        </div>      
      
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="heading-2">
      <h5 class="mb-0">
        <a class="collapsed" role="button" data-toggle="collapse" href="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
          Tarkistuspiste 2
        </a>
      </h5>
    </div>
    <div id="collapse-2" class="collapse" data-parent="#accordion" aria-labelledby="heading-2">
      <div class="card-body">
        Tarkistuspisteessä ei ole muuttujia
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="heading-3">
      <h5 class="mb-0">
        <a class="collapsed" role="button" data-toggle="collapse" href="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
          Tarkistuspiste 3
        </a>
      </h5>
    </div>
    <div id="collapse-3" class="collapse" data-parent="#accordion" aria-labelledby="heading-3">
      <div class="card-body">
        Text 3
      </div>
    </div>
  </div>
</div>
  </div></div>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>

style.css

.mb-0 > a {
  display: block;
  position: relative;
}
.mb-0 > a:after {
  content: "\f078"; /* fa-chevron-down */
  font-family: 'FontAwesome';
  position: absolute;
  right: 0;
}
.mb-0 > a[aria-expanded="true"]:after {
  content: "\f077"; /* fa-chevron-up */
}

ul > li {
  list-style: none;
}

.variable::before {
  content: "";
}

.variable::after {
  content: "</div>";
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />