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>
<meta charset="UTF-8" />
<title>Slide Panels</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,600" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700" rel="stylesheet">
<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>
<div class="accordion_wrapper">
<div class="accordion one">
<h3>(place holder)</h3>
</div>
<!-- end accordion/one -->
<div class="accordion_panel">
<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>
<p> </p>
</div>
<!-- end accordion_panel -->
</div>
<!-- end accordion_wrapper -->
</body>
</html>
1 Correct answer
The text should replace the bold below, between the apostrophes:
.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;
}
77
Replies
osgood_ a écrit
How can you say teamwork doesn't cost the customer more, that is just plainly not true. A team needs offices, sales-people, its expensive to to feed a team of 'experts' as opposed to an individual who may just have a small office and small overheads.
well ,
A decade ago, this was the case, nowadays thanks to the Internet, the mutualised platform and the democratization of companies, it is very easy to work on projects by pooling our respective expertise.
a designer can be in Switzerland, the information architect in the United States, the accessibility expert in Marseille, the project manager in Paris, the style coding specialist in Belgium, the server and database administrator in Belgium too, and the coder blooming in a lavender field... and finally the final customer in Sweden... this is of course an example... 
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
osgood_ a écrit
Well you would not survive in my world then because my clients expect answers almost immediately and I think I should be in a position to provide them, not wait several hours for someone from a different country to provide the answer as you must have to. Exactly why I wont use overseas hosting because they are never available when you need them most, depite the broken promises. I prefer a much more exclusive set-up for my clients who know exactly when and who they can speak to.
I don't know what kind of applications you're working on. For my part, the projects in which I participate aim to meet the internal application needs of each of our clients.
the sectors of activity concerned affect both industrial sectors, as well as the tertiary sector with the insurance of merchant ships or the medical sector with decision support tools.
for each of the projects, we mainly use dedicated, or virtual (VPS), servers, which for legality reasons are generally located in our customers' countries
latency, and the expected reactivity rate can vary between immediacy and overnight for the next day... it all depends on the project and the importance of the change to be made.
Nevertheless, and for a very long time, we have adopted an agile deployment method, which means that we are continuously working on the project simultaneously with users. Specifications are constantly evolving and the application must adapt almost in real time.
working off-site, with partners and customers in different countries, in multiple sessions, has never bothered us or our customers
Perhaps you are at the height of your career..........you might not be saying that in 20 years or so.....times change and priorities change.
maybe, and as Forest's mother said, we never know what tomorrow will be like... 
Anyway, projects and learning both combine in the present, and since 1980, when I started to develop, I have been learning, I have always learned and I hope to continue to learn because I like it
osgood_ a écrit
If it doesnt bother you or your customers thats fine, although I find it hard to believe it can be as unified and streamlined as a team working in the one location where time barriers are consitant. Maybe your clients are happy to wait, mine generally are not.
Have you ever really tried a project management and collaborative work platform, have you tried to work in a team with GIT, do you have an idea of how more and more large decentralized agencies are working...
Besides, why do you think our customers expect... what makes you say that?
https://forums.adobe.com/people/B+i+r+n+o+u wrote
osgood_ a écrit
If it doesnt bother you or your customers thats fine, although I find it hard to believe it can be as unified and streamlined as a team working in the one location where time barriers are consitant. Maybe your clients are happy to wait, mine generally are not.
Have you ever really tried a project management and collaborative work platform, have you tried to work in a team with GIT, do you have an idea of how more and more large decentralized agencies are working...
Yes, to me its a PITA having to work with other developers/agenies because in my experience they are usually indecisive, whereas I like to work very fast and make quick decisions and use uncomplicated workflows, not ones which are generally over-engineered for what is required. In that respect thats not easy to seperate the wheat from the chaff. I've had my fair share of being involved in big 'international' team work environments where the left hand doesn't always know/agree with what the right hand is doing. Not really my thing to sit around and listen to a lot of 'experts' mostly talking bullcrap - I get on and do the job, not talk about it. That just my opinion, others experience will vary of course
AdChoices