Я с трудом пытаюсь выяснить, как я могу сделать этот Slick Accordion полностью мобильным, и мне кажется, что все перекрывает все, что я пробовал.
ВотАккордеон на Рабочем столе (Работает отлично):
Вот Аккордеон по Мобильной Отзывчивости на (991px и меньше):
Таким образом, я не могу понять, как сделать все вещи встроенными, как в мобильной версии, я пробовал атрибуты Display / Position / etc .. и имеюс треском провалился.
Вот код:
#AccordionHeadings {
font-weight: bolder;
color: slategrey;
font-size: medium;
}
.small {
height: 70px!important;
}
.small:hover {
background-color: #F8E498!important;
}
.col-md-1 {
padding: 0px!important;
margin-top: 5px!important;
}
#AccordionText {
margin-bottom: 0px!important;
color: gray;
}
#AccordIcon {
padding-right: 10px;
height:25px;
width: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="row">
<div class="col-sm-8">
<h4>Choose the right app for the job!</h4>
<hr style="margin-top: 10px;"/>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;">
<img id="AccordIcon" src="https://image.flaticon.com/icons/svg/148/148946.svg" />
<span id="AccordionHeadings">File Storage and Sharing</span><span class="glyphicon glyphicon-menu-down pull-right"></span></a>
<div id="s0" class="sublinks collapse"> <!-- sublinks collapse -->
<a class="list-group-item small" href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="col-md-1">
<img style="height: 32px; width: 45px;" src="https://i.imgur.com/e0a3j2l.png" />
</div>
<div class="col-md-11">
<h5>OneDrive</h5>
<p id="AccordionText">Store your files in one place, share them
with others, and get them from any device connected to the
Internet.</p>
</div>
</a>
<a class="list-group-item small" href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx">
<div class="col-md-1">
<img src="https://i.imgur.com/uii8cJt.png" />
</div>
<div class="col-md-11">
<h5>SharePoint</h5>
<p id="AccordionText">Share and manage content, knowledge, and
applications to empower teamwork and quickly find information
within your organization.</p>
</div>
</a>
<a class="list-group-item small" href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx">
<div class="col-md-1">
<img src="https://i.imgur.com/fV0AGNi.png" />
</div>
<div class="col-md-11">
<h5>Teams</h5>
<p id="AccordionText">Microsoft Teams is a chat-based workspace
offered in Office 365. Teams makes collaborating with your team
easy.</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Я сократил код для вас, чтобы была видна только одна строка аккордеона, чтобы не было так много кода, и я также включилправильные библиотеки jQuery и библиотеки Bootstrap CDN.