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>
1 Correct answer
14
Replies
AdChoices