Highlighted

Accordion text disappears on mobile

Contributor ,
Apr 04, 2018

Copy link to clipboard

Copied

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.

http://offers.premierinc.com/accordion_accordion.html

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>

Views

361

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Accordion text disappears on mobile

Contributor ,
Apr 04, 2018

Copy link to clipboard

Copied

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.

http://offers.premierinc.com/accordion_accordion.html

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>

Views

362

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 04, 2018 0
Adobe Community Professional ,
Apr 04, 2018

Copy link to clipboard

Copied

The max-height is currently at too low.  So setting it lower will only hide more of your content.  What you will want to do is set the max-height to 100%.  That will force the height of the container to be the height needed for the content.  Setting the overflow to visible will tell the content it go to the size needed, but it will not be constrianed by its outer container, thus it could flow over/under other content on the page depending on the layer attributes.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2018 0
Contributor ,
Apr 04, 2018

Copy link to clipboard

Copied

Thanks Ben for your response. I tried what you suggested and the text cutting off issue is fixed but all the tabs are all automatically opened now.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2018 0
Adobe Community Professional ,
Apr 04, 2018

Copy link to clipboard

Copied

What browser are you testing in?  In my tests the accordion always started in the closed position and are not opening automatically.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2018 0
Contributor ,
Apr 04, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2018 0
Adobe Community Professional ,
Apr 04, 2018

Copy link to clipboard

Copied

Ok.  Took another look and it looks like there is a javascript that is controlling this for you.  Line 179 of your document, says this:

  panel.style.maxHeight = panel.scrollHeight + "px";

Since that javascript is setting the max-height, try changing that line to panel.style.maxHeight = "100%"; 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2018 0
LEGEND ,
Apr 04, 2018

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2018 0
Contributor ,
Apr 04, 2018

Copy link to clipboard

Copied

You rock osgood!!!!! Thanks so much for catching that. I didn't even think to look at the js sorry. Nice work! I was wondering where osgood was:)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2018 0
Contributor ,
Apr 04, 2018

Copy link to clipboard

Copied

Hey osgood. I'm trying to center the tab heading and I've tried to add  text-align:center ; to all the styles and it's not working. I've added it to these styles and none work. Whats weird is that it centers in design view but not live.

.one h3 {          (i added the h3)

background-color: #ffc627;

text-align:center;

}

.accordion h3 {

margin: 0;

padding: 0;

font-size: 22px;

font-weight: 400;

text-align:center;

}

.accordion  {

display: flex;

justify-content: space-between;

position: relative;

border-radius: 25px;

padding: 20px 30px 17px 30px;

margin: 0 0 10px 0;

text-align:center;

}

I've tried inline style as well.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2018 0
LEGEND ,
Apr 04, 2018

Copy link to clipboard

Copied

Try removing display flex and justify content space between from .accordion. lm not at my ccomputer right now so l cant guarantee what will happen

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2018 0
Contributor ,
Apr 04, 2018

Copy link to clipboard

Copied

No dice. even tried !important;

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2018 0
LEGEND ,
Apr 04, 2018

Copy link to clipboard

Copied

Are you sure your not viewing a cached version in your browser. Looking at the css l cant see what would be stopping the h3 text from centering assuming you have added text align center to the h3 css selector

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2018 0
Contributor ,
Apr 04, 2018

Copy link to clipboard

Copied

Screen Shot 2018-04-04 at 5.25.20 PM.png

Yes, I cleared cache and tried hard refreshes. Looks fine in design preview. tried chrome and firefox. weird. I uploaded to the server with the previous link and still not centered.

I added it here:

.accordion h3 {

margin: 0;

padding: 0;

font-size: 22px;

font-weight: 400;

  text-align: center;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2018 0
LEGEND ,
Apr 04, 2018

Copy link to clipboard

Copied

Using the previous html/css code I supplied and amending the css selectors to as below will center the h3 tag in the accordion header: Tested in Chrome and Firefox. If after you have made the changes and it still does'nt work then you have something wrong in your code.

.accordion  {

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;

text-align: center;

}

.accordion h3:after {

float: right;

content: '\002B';

color: #777;

font-weight: bold;

font-size: 30px;

}

.active h3:after {

float: right;

content: "\2212";

color: #777;

font-weight: bold;

font-size: 30px;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2018 0
Contributor ,
Apr 05, 2018

Copy link to clipboard

Copied

Worked! Thanks a bunch Osgood!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 05, 2018 0