Hello,
I have an accordion and can't get the panel to adjust height on mobile devices. I've tried changing max-height:0; to height:auto; and overflow:visible; but it still won't work. Can someone please help with this?
Thanks in advance. Below is a link to my working accordion.
I'm using Chrome. I tested your suggestion locally. When you preview from dreamweaver all the tabs are open with height set to 100%
update---
whaTS WEIRD is that if I have the window resized to mobile before I open the tab it's fine. Just noticed this. so for instance if my desktop window is about 600 and I open a tab the panel is sizing correctly but when I reduce the width even more it messes up. If I open a tab with the window as small as it can get it works. But if i start at say 1200 and try to reduce it gets funky.
any changes to the height makes the tab open automatically
You might want to try something less irratic( see code below). I've styled the accordions and the first accordion panel. All you need to do is insert the text for accordion 2 and 3.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Slide Panels</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,600" rel="stylesheet">
<style>
body {
font-family: 'Raleway', sans-serif;
font-size: 16px;
line-height: 25px;
background-color: #696969;
}
* {
box-sizing: border-box;
}
.accordion_wrapper {
width: 75%;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.accordion_wrapper {
width: 90%;
}
}
@media screen and (max-width: 480px) {
.accordion_wrapper {
width: 95%;
}
}
.accordion {
display: flex;
justify-content: space-between;
position: relative;
border-radius: 25px;
padding: 20px 30px 17px 30px;
margin: 0 0 10px 0;
}
.accordion h3 {
margin: 0;
padding: 0;
font-size: 22px;
font-weight: 400;
}
.accordion:after {
position: absolute;
right: 30px;
content: '\002B';
color: #777;
font-weight: bold;
font-size: 30px;
}
.active:after {
content: "\2212";
position: absolute;
right: 30px;
color: #777;
font-weight: bold;
font-size: 30px;
}
.accordion_panel {
padding: 20px 30px 30px 30px;
color: #fff;
}
.accordion_panel h3 {
margin: 0;
padding: 0 0 30px 0;
font-size: 25px;
font-weight: 600;
}
.accordion_panel p {
margin: 0;
padding: 0;
}
.accordion_panel li {
margin: 0 0 15px 0;
}
.one {
background-color: #ffc627;
}
.two {
background-color: #99cccc;
}
.three {
background-color: #0099cc;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$('.accordion_panel').hide();
$('.accordion').css('cursor','pointer').click(function(){
$(this).next('.accordion_panel').slideToggle();
$(this).toggleClass('active');
});
});
</script>
</head>
<body>
<div class="accordion_wrapper">
<div class="accordion one">
<h3><strong>Phase 1</strong> - Avoid Penalties</h3>
</div>
<!-- end accordion/one -->
<div class="accordion_panel">
<h3>Avoid Penalities</h3>
<p>Our Premier, Inc. experts have found that organizations focused on avoiding penalties are often at the beginning of their journey to high reliability, but still on the path to high reliability! Organizations with this mindset are approaching the core competencies with the below actions.</p>
<ul>
<li>Establishing an active Patient/Family Advisory Council.</li>
<li>Tracking improvement efforts, which are not sticking for longer than five months.</li>
<li>Setting up plans to overcome low staff participation rates in engagement surveys.</li>
<li>Using root cause analysis for retrospective events, but finding it difficult to determine why process recommendations are not lasting longer than five months.</li>
<li>Working with governing boards to establish patient safety as a priority goal.</li>
</ul>
<p>
Part of becoming a high reliability organization means avoiding errors and system failures, which can often lead to payment penalties. High reliability organizations know that the key to sustainability and moving beyond a mindset of avoiding penalties is mastering the foundations of quality and safety.
</p>
</div>
<!-- end accordion_panel -->
<div class="accordion two">
<h3><strong>Phase 2</strong> - Earn Reimbursement</h3>
</div>
<!-- end accordion/two -->
<div class="accordion_panel">
<h3>Earn Reimbursement</h3>
</div>
<!-- end accordion_panel -->
<div class="accordion three">
<h3><strong>Phase 3</strong> - Predict Payment</h3>
</div>
<!-- end accordion/three -->
<div class="accordion_panel">
<h3>Predict Payment</h3>
</div>
<!-- end accordion_panel -->
</div>
<!-- end accordion_wrapper -->
</body>
</html>
Already have an account? Login
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
AdChoices