Need help adding "read more" "read Less" text to my accordion

Report · Sep 05, 2018

Hi all,

I have an accordion with text in the bar. I would like it to say read more and read less when expanded. Below is my code. How would I be able to do this? CSS?

<!DOCTYPE html>

<html>

<head>

<title>Slide Panels</title>

<style>

}

* {

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 {

position: relative;

border-radius: 50px;

padding: 10px;

margin: 0 0 10px 0;

}

.accordion h3 {

margin: 0;

padding: 0;

font-size: 21px;

font-weight: 400;

text-align: center;

font-family: Roboto, sans-serif;

}

.accordion h3:after {

float: right;

content: '\002B';

color: #777;

font-weight: bold;

font-size: 25px;

line-height:30px;

}

.active h3:after {

float: right;

content: "\2212";

color: #777;

font-weight: bold;

font-size: 30px;

font-family: Roboto, sans-serif;

}

.accordion_panel {

padding: 20px 30px 30px 30px;

color: #fff;

text-align: left;

}

.accordion_panel h3 {

margin: 0;

padding: 0 0 15px 0;

font-size: 25px;

font-weight: 600;

text-align: left;

}

.accordion_panel p {

margin: 0;

padding: 0;

text-align: left;

}

.accordion_panel li {

margin: 0 0 15px 0px;

text-align:left;

}

.accordion_panel ul {

margin: 0 0 0 15px;

text-align:left;

}

.one {

background-color: #ffc627;

}

.two {

background-color: #99cccc;

}

.three {

background-color: #0099cc;

}

</style>

</head>

<body>

<h3>(place holder)</h3>

</div>

<span style="font-size:20px;line-height:2;font-family: Roboto, sans-serif;font-weight:300;color:#000000;"><i aria-hidden="true" class="fa fa-chevron-right"> </i> physician-led structure with effective physician champions<br />

<i aria-hidden="true" class="fa fa-chevron-right"> </i> high levels of trust between administrative and clinical leaders<br />

<i aria-hidden="true" class="fa fa-chevron-right"> </i> collaborative culture that encourages cost-effective care</span><span style="font-size:16px;font-family: Roboto, sans-serif;"> </span>

</div>

</div>

</body>

</html>

Report · Sep 10, 2018

This reply is not a reply to anyones comment(s) in particular.

We are back on the old subject of ways of working, (not necessarily workflows). I work in an international team(s) environment, (still do to some extent, even though I am retired) which has much in common with Birnou and how he describes doing so. Conversly I do not follow how Birnou described his workflow in previous discussions, but have more in common with Osgood in how he has described his workflow in previous discussions.

What I think is missing from this discussion so far, is context, as each of us work in completely different environments, and have different 'goals' that must be met when it comes to meeting the end users requirerments, (not necessarily the clients, or the organisation paying us).

No one in the forum, (or from Adobe) knows what I actually do, and I do not know what others actually do. So it is impossible to say what would work or not work for anyone in a discussion. Or say anyone should be using or doing anything.

Report · Sep 10, 2018

pziecina wrote
This reply is not a reply to anyones comment(s) in particular.
We are back on the old subject of ways of working, (not necessarily workflows). I work in an international team(s) environment, (still do to some extent, even though I am retired) which has much in common with Birnou and how he describes doing so. Conversly I do not follow how Birnou described his workflow in previous discussions, but have more in common with Osgood in how he has described his workflow in previous discussions.
What I think is missing from this discussion so far, is context, as each of us work in completely different environments, and have different 'goals' that must be met when it comes to meeting the end users requirerments, (not necessarily the clients, or the organisation paying us).
No one in the forum, (or from Adobe) knows what I actually do, and I do not know what others actually do. So it is impossible to say what would work or not work for anyone in a discussion. Or say anyone should be using or doing anything.

Excellent post, I agree, its just a shame so many others who post in this forum come across as totally ignorant, I would say. Everyones situation is quite different and no one is an 'expert' despite they declaring themselves to be so, no-one regardless of how long they have been doing this will know eveything. People need to be more open it terms of accepting things are not left out or introduced into a website maliciously but because of lack of knowledge, particulary concering minority workflows such as accessibilty. On the other hand if you work for client that demands accessibility of course its going to be high on your list of importance. I think it should be myself but unless the web has more control over pulished content, before the horse has bolted, it never will be.

Report · Sep 09, 2018

https://forums.adobe.com/people/B+i+r+n+o+u wrote
the final cost will be the same for the customer, alone, each of us will of course perceive less than if he had occupied all the positions... but that doesn't matter... projects are not missing and the time spent on each of the modules being distributed, this ultimately leads to the same except that the quality of the projects is increased

Not always, in such development environments the project manager MUST have a very good working knowledge of the web techs required, (both front and back-end), and the team managment skills to bring everything together on-time and on-budget, (not something many have nowadays, I have discovered).

Need help adding "read more" "read Less" text to my accordion

1 Correct answer