Блог

Я хотел бы скопировать карту, подобную той, что на изображении ниже. Я использую для этого HTML, CSS, Bootstrap. У меня возникла проблема с созданием панели расширения, которая есть на изображении ниже. Кто-нибудь может помочь мне создать панель расширения, подобную изображению ниже, в моем коде

Я не знаю, как создать панель расширения в загрузочной карте, используя HTML, CSS Я искал в сети, но ничего не смог найти. Пожалуйста, помогите мне.

Мой HTML-код:

 <div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col-xs-3">
                <button class="btn btn-warning">Submission</button>amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;
            </div>
            <div class="col-sm-5">
                <div class="space">
                    <h6 style="color:red";>KKR - USA</h6><h6><b> - KLA</b></h6>- GJAHR<h6>
                    <p style="font-size:13px;"><b>100</b></p>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="tip">
                    <img src="avatar.png" alt="Avatar" style="width:25px"><p style="font-size:15px">Nivedha S</p>
                    <br/>
                    <img src="avatar.png" alt="Avatar" style="width:25px"><p style="font-size:15px">Jagadeesh Balan</p>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="icon">
                    <i class="fa-li fa fa-check-square">
                    <br>
                    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="heading-2">
                                <h4 class="panel-title">
                                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
                                    </a>
                                </h4>
                            </div>
                            <div id="collapse-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-2">
                                <div class="panel-body">
                                    Text 2
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>
  

И мой код CSS

 .col-sm-3:not(:last-child) {
    border-right: 1px solid #ccc;
    padding: 12px;
}

.col-xs-3:not(:last-child) {
    border-right: 1px solid #ccc;
}
.col-sm-5:not(:last-child) {
    border-right: 1px solid #ccc;
}
.col-xs-2:not(:last-child) {
    border-right: 1px solid #ccc;
}
h6{
display: inline;
}
.space{

line-height: 2.5;
}
#demo{
background-color: #ccc;

}
.tip p {
    display:inline;
    margin-left:10px;
}
img {
  border-radius: 50%;
}
.icon{
display: inline;

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

Компонент свертывания в Bootstrap — это то, что вы ищете. Вы реализовали это неправильно, так как div, содержащий дополнительные сведения, должен находиться за пределами основного div.

Как объясняется в первых строках документа Boostrap collapse :

.свернуть.показать показывает содержимое

Таким образом, ваш контент должен быть где-то в другом месте в вашем случае, если вы не хотите, чтобы весь div был скрыт / показан при нажатии на кнопку.

Я добавил следующее в ваш основной div :

 <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Open details
  </a>
  

Затем следующий div снаружи :

 <div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>
  

Вот рабочая ручка !