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 07, 2018

in a general context your argument holds water and makes sense, but on the precise point that we are talking about, which consists in swapping the text of an element of interaction, i.e. a text of content that is important both in terms of general accessibility and screen reading, I find that it does not cost either in budget or in expertise to preserve accessibility

Report · Sep 07, 2018

https://forums.adobe.com/people/B+i+r+n+o+u wrote
I find that it does not cost either in budget or in expertise to preserve accessibility

I agree on the budget, assuming you are aware of the issue, but you need a certain amount of knowledge in accessibility procedures which you may term 'expertise'. I had zero idea that it was not accessible so guess how many other developers most likely have the same awareness.

Im not sure if you work in a team where each has a dedicated job and can asign more time and effort into researching or work as an individual on limited budgets and time constraints, we dont have time to resaerch everything, certainly not where minorities are concerned.

I can see your point but in the real world you might be being unrealistic to expect developers to know everything. They know what they know and each knows something different than the other.

Its like saying 'Its easy when you know how or why' of course it is and will be

Report · Sep 07, 2018

it's easy just open the page demonstrate by the OP Become a High Reliability Organization | Premier then type a ctrl F and try to find the text More Details, or less when less is display... no result... normal it's not text... that's CSS

Report · Sep 07, 2018

https://forums.adobe.com/people/B+i+r+n+o+u wrote
it's easy just open the page demonstrate by the OP Become a High Reliability Organization | Premier then type a ctrl F and try to find the text More Details, or less when less is display... no result... normal it's not text... that's CSS

Why would I do that unless I was one of the minority we are talking about? You're not really getting my point. If you are aware then yes you may do it but if you are totally oblivious to accessibily, like I am and many other web-developers, its not something which is high on the list, if at all. As I said I dont have the luxury to spend time learning to cater for minority groups when I need to invest that time just to keep up with current techniques which are going to keep me in this job. If the web was to slow down a bit and allow developers to actually catch their breathe I think you may have a good point.

As I said in a previous reply its my opinion that the web has become rather ridiculous in the last few years becoming a dumping ground for everyone's problems and disabilities.

If I go to a restaurant I dont really expect the menu to be in braille or in large print, similary if I pick up a magazine in a newsagrent I dont expect those to be supplied in large print, most shops have no wheelchair accessibilty. Why has the web become a dumping ground for minority groups to vent their frustration?

Yes of course I have sympathy with anyone with accessibilty issues but I have my own issues too as a web-developer, that of working with small budgets, not enough time to learn everything. Developers obviously need to make a living....maybe those minority groups ought to think of that. Infact Im positive that teh majority of people with accssibilty issues dont expect anything, its these idiot evangist accessibility groups with big mouths that have nothing better to do. Ok fine if they want to supply the funds and experts/time to go through my sites and make them accessible I'm all for that but when shit hits the fan and they are asked to put their money where their mouth is, they are nowhere to be seen.

Report · Sep 09, 2018

osgood_ a écrit
If I go to a restaurant I dont really expect the menu to be in braille or in large print, similary if I pick up a magazine in a newsagrent I dont expect those to be supplied in large print, most shops have no wheelchair accessibilty. Why has the web become a dumping ground for minority groups to vent their frustration?

I don't share your point of view and your opinion on accessibility...

I find your examples completely out of scope...

in a restaurant if the menus are not provided in Braille, there is always, nearby, a waiter or butler who can guide us in our choices... and even if I am seeing, and used to, the restaurants I frequent... I often ask for advice, including to help me choose the most appropriate wine for the flavours of the meal

magazines are an example that makes no sense because the support by itself does not allow to add any information whatsoever to the one already printed... and moreover accessibility is not only about writing bigger but especially in an optimal contrast... generally written in yellow on a black background that is rather ideal and generalist

I didn't know that in England wheelchair accessibility was a choice of the store owner, here in France it's mandatory

the web, due to its modularity, its standardization in terms of languages and technologies and its simplicity of evolution, is a completely open field of creation and makes it possible to implement both quality referencing and accessibility open to all, in order to best serve the content it puts on the web for everyone, including robots

Report · Sep 09, 2018

https://forums.adobe.com/people/B+i+r+n+o+u wrote
osgood_ a écrit
I don't share your point of view and your opinion on accessibility...

I think you do because I think accessibilty is good, its just not feasable for every developer to have the knowledge to implement all of it correctly, hopefully they do their best within the knowledge they have on the subject.

https://forums.adobe.com/people/B+i+r+n+o+u wrote
I find your examples completely out of scope...
in a restaurant if the menus are not provided in Braille, there is always, nearby, a waiter or butler who can guide us in our choices... and even if I am seeing, and used to, the restaurants I frequent... I often ask for advice, including to help me choose the most appropriate wine for the flavours of the meal

That's complete rubbish. You could argue there is always someone near when you are sitting at a computer or you could ring someone and ask them to guide you through the website. Nosnsense, that's not a good arguement at all. The reason a restaurant doesnt produce a menu in braille is it would cost to do so otherwise why not, its good etiquette for a public facing outlet.

https://forums.adobe.com/people/B+i+r+n+o+u wrote
magazines are an example that makes no sense because the support by itself does not allow to add any information whatsoever to the one already printed... and moreover accessibility is not only about writing bigger but especially in an optimal contrast... generally written in yellow on a black background that is rather ideal and generalist
the web, due to its modularity, its standardization in terms of languages and technologies and its simplicity of evolution, is a completely open field of creation and makes it possible to implement both quality referencing and accessibility open to all, in order to best serve the content it puts on the web for everyone, including robots

Sure its about reading bigger text....do you know anyone that suffers from poor vision and would delight in reading magazines if the text was bigger. Why dont magazines take into account small text overlayed onto busy images. That's hard enough to read for people with excellent vision let alone those who are visually impaired. Why? I'll tell you why - because they want to sell as many magazines as possible and producing a high contrast dull editions with big text isnt going to shift many off the shelf so they ignore minority groups. Do I agree with it, certainly not, but I understand, its business sense.

As regards to your last comment as I keep saying.........if you have the knowledge, time and budget to research - you don't seem to understand that. If the web allows anyone to publish expect the worst.

Report · Sep 09, 2018

osgood_ a écrit
That's complete rubbish. You could argue there is always someone near when you are sitting at a computer or you could ring someone and ask them to guide you through the website. Nosnsense, that's not a good arguement at all. The reason a restaurant doesnt produce a menu in braille is it would cost to do so otherwise why not, its good etiquette for a public facing outlet.

the fundamental difference between a situation lived in a restaurant and the user experience in front of his(her) computer... is that in a restaurant we know with certainty that the waiter will be at our side, would only be to take our order, whereas in front of a computer we can find ourselves completely alone at home

Sure its about reading bigger text....do you know anyone that suffers from poor vision and would delight in reading magazines if the text was bigger. Why dont magazines take into account small text overlayed onto busy images. That's hard enough to read for people with excellent vision let alone those who are visually impaired. Why? I'll tell you why - because they want to sell as many magazines as possible and producing a high contrast dull editions with big text isnt going to shift many off the shelf so they ignore minority groups. Do I agree with it, certainly not, but I understand, its business sense.

I'm just curious, have you ever met and discussed the web browsing issues that a person with reduced visibility encounters, much other than by what is reported on this or that press article

Report · Sep 09, 2018

https://forums.adobe.com/people/B+i+r+n+o+u wrote
osgood_ a écrit
That's complete rubbish. You could argue there is always someone near when you are sitting at a computer or you could ring someone and ask them to guide you through the website. Nosnsense, that's not a good arguement at all. The reason a restaurant doesnt produce a menu in braille is it would cost to do so otherwise why not, its good etiquette for a public facing outlet.
the fundamental difference between a situation lived in a restaurant and the user experience in front of his(her) computer... is that in a restaurant we know with certainty that the waiter will be at our side, would only be to take our order, whereas in front of a computer we can find ourselves completely alone at home

I still dont think its acceptable. A restaurant should be able to offer a braille version of its menu, its simple enough. People with accessibilty issues would like to be able to do things for themselves not rely on others charity and as such we should treat them with more respect and we are not because the web is a free for all, without boundaries. You cannot have it both ways - you either make it a closed shop and a better environment for all or leave the door open to 'abuse' and deal with the crap and I know which is going to win.

Report · Sep 09, 2018

you were right... all restaurant menus should have a Braille alternative... like websites by the way... I agree with you

Report · Sep 09, 2018

anyway... all this mass of mail is getting out of hand...at first, I was just making a remark about the fact that using CSS to define the text of a button "read more" was not accessible... and therefore that it was, in my own opinion, better not to use such a technique... that's all...

Report · Sep 09, 2018

https://forums.adobe.com/people/B+i+r+n+o+u wrote
anyway... all this mass of mail is getting out of hand...at first, I was just making a remark about the fact that using CSS to define the text of a button "read more" was not accessible... and therefore that it was, in my own opinion, better not to use such a technique... that's all...

I absoluety agree....but I personally didn't know and that was my point. The geeks that come up with the specs should be more observant about accessibility and maybe not make it part of the spec if it could be abused in any way shape or form. If that means you cant add icons and shapes so be it.

Report · Sep 09, 2018

Isn't this discussion now completely off-topic, and becomming more like a number of previous discussions, (remember Os, you said I was talking in thousands, and I replied that you should think in millions)?

It would be nice if everyone could do everything correctly, and even though the legal requirements are in place in the EU, they are not in the USA, (or many other countries). Unfortunatly web design and developments legal requirerments are not well enough known, or enforced, (something you can blame authors of web design/development books/videos/tutorials for) so are completely ignored by most web designers/developers.

We are not all 'speaking' from the same rule book, we are not all in a position to tell clients xyz are legal requirerments, and we are certainly not all in a position to turn down work, (except me) just because the competition is not doing everything they should, (so offering a site or project at a lower price).

Report · Sep 09, 2018

pziecina wrote
Isn't this discussion now completely off-topic, and becomming more like a number of previous discussions, (remember Os, you said I was talking in thousands, and I replied that you should think in millions)?

Well yes, but Im struggling to make myself understood that I work for clients on limited budgets. I already put more time in than i ever charge for and I dont think that is abnormal for a freelance web-developer. That is why I keep saying its getting beyond a joke now to be a 'lone' web-developer because not only do we have to constantly keep learning or sell our souls to the devil by using frameworks, extentions and tools that are supposed to write the code for you which generally fall woefully short but we have to learn to cater for minorities as well. Its just not possible as an individaul web-develeloper to do that, maybe a team with dedicated experts and big budgets, yes.

If it means small companies cant participate then so be it but hey the web is a mess, mess, mess - always has been and always will be.

Report · Sep 09, 2018

osgood_ wrote

Well yes, but Im struggling to make myself understood that I work for clients on limited budgets. I already put more time in than i ever charge for and I dont think that is abnormal for a freelance web-developer. That is why I keep saying its getting beyond a joke now to be a 'lone' web-developer because not only do we have to constantly keep learning or sell our souls to the devil by using frameworks, extentions and tools that are supposed to write the code for you which generally fall woefully short but we have to learn to cater for minorities as well. Its just not possible as an individaul web-develeloper to do that, maybe a team with dedicated experts and big budgets, yes.
If it means small companies cant participate then so be it but hey the web is a mess, mess, mess - always has been and always will be.

It is a myth held by many freelancers and self-employed that salaried developers work less and are paid more. We may have guaranteed pay month in, month out, but we seldom work much less than 60hrs per week, (more when the deadline approaches) and that is not counting the 5-10 hrs per week, (at least) we spend learning, or re-reading specs and then 'playing with the code' to learn how to code what we learn.

It is a constant learning process for anyone serious about developing sites or browser based apps. That applies to any and everyone.

Report · Sep 09, 2018

Where I live, physicians must fulfill continuing medical education units per year. It's tied to the renewal of their medical license. Over the course of one's career, a doctor will spend hundreds of hours in CME not to mention hundreds more hours reading journals and books in their "spare time." Other board certified professions have similar requirements.

Until the web implements some sort of standardized testing, developers are going to do what they want to do without much concern over WASC, etc... unless it's specifically required for a particular project.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Sep 09, 2018

https://forums.adobe.com/people/Nancy+OShea wrote
Until the web implements some sort of standardized testing, developers are going to do what they want to do without much concern over WASC, etc... unless it's specifically required for a particular project.

+1 for the implementation of a standardised web design/developers test.

Probably only happen though, once the current generation of those employing web designers/developers are better educated, (both corporate and private) in not just what the web can do, but what is should and must do.

Report · Sep 09, 2018

https://forums.adobe.com/people/Nancy+OShea wrote
Where I live, physicians must fulfill continuing medical education units per year. It's tied to the renewal of their medical license. Over the course of one's career, a doctor will spend hundreds of hours in CME not to mention hundreds more hours reading journals and books in their "spare time." Other board certified professions have similar requirements.
Until the web implements some sort of standardized testing, developers are
going to do what they want to do without much concern over WASC, etc...
unless it's specifically required for a particular project.

Most local GPs in the UK, not surgeons, just those that look through little black books to find out what pills they can prescribe to you when you get a rash or some minor ailment get 100k plus annually, a bit more than your average web-developers I suspect....

And yes I agree until the web implements some kind of standardised testing it will be open to abuse, which I think is the point you are making. I wont hang my hat on it though just a nice thought.

Report · Sep 09, 2018

osgood_ wrote
Most local GPs in the UK, not surgeons, just those that look through little black books to find out what pills they can subscribe to you when you get a rash or some minor ailment get 100k plus annually, a bit more than your average web-developers I suspect.

GPs have those exorbitant student loans to pay back, too. In California, accupuncturists, hair dressers and dental hygienists must take exams too. They make well below 100K.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Sep 09, 2018

https://forums.adobe.com/people/Nancy+OShea wrote
osgood_ wrote
Most local GPs in the UK, not surgeons, just those that look through little black books to find out what pills they can subscribe to you when you get a rash or some minor ailment get 100k plus annually, a bit more than your average web-developers I suspect.
GPs have those exorbitant student loans to pay back, too. In California, accupuncturists, hair dressers and dental hygienists must take exams too. They make well below 100K.

Well some, not those that have been in the profession before students started being charged for their further education. I got all mine free of charge and I also received a handsome grant non-repayable back in the day

That was when the World and its people were not total insane and invested in the future.

Report · Sep 09, 2018

osgood_ a écrit
Most local GPs in the UK, not surgeons, just those that look through little black books to find out what pills they can prescribe to you when you get a rash or some minor ailment get 100k plus annually, a bit more than your average web-developers I suspect....

OP question was about changing text in a toggle tab

The answer was about using CSS to control and generate the label

I said that solution wasn't accessible

that generate a hot thread about accessibility in general

Now the thread is about how much earn a doctor and how much is or not confortable his (her) living?????

Report · Sep 10, 2018

https://forums.adobe.com/people/B+i+r+n+o+u wrote
osgood_ a écrit
Most local GPs in the UK, not surgeons, just those that look through little black books to find out what pills they can prescribe to you when you get a rash or some minor ailment get 100k plus annually, a bit more than your average web-developers I suspect....
OP question was about changing text in a toggle tab
The answer was about using CSS to control and generate the label
I said that solution wasn't accessible
that generate a hot thread about accessibility in general
Now the thread is about how much earn a doctor and how much is or not confortable his (her) living?????

Not sure why you are addressing that post to me, try Nancy, she bought the subject of other professions into the equation. For some reason you and Ben like to start attacking me when your arguments start to fall apart or you dislike what I have to say.....stay real please and get your facts right. It annoys me when people cant be asked to read the thread properly. Thank you for your co-operation...

Report · Sep 10, 2018

osgood_ wrote
For some reason you and Ben like to start attacking me when your arguments start to fall apart or you dislike what I have to say.....stay real please and get your facts right.

I had a hard look and could not find a reply in this post where I have attacked you.

Perhaps you are referring to previous posts that are completely irrelevant. Even then I find it hard to believe that I 'attacked' anyone. That is not my style. I will have 'attacked' the substance because in many cases it was factually untrue.

stay real please and get your facts right

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Sep 10, 2018

BenPleysier wrote
osgood_ wrote
For some reason you and Ben like to start attacking me when your arguments start to fall apart or you dislike what I have to say.....stay real please and get your facts right.
I had a hard look and could not find a reply in this post where I have attacked you.
Perhaps you are referring to previous posts that are completely irrelevant. Even then I find it hard to believe that I 'attacked' anyone. That is not my style. I will have 'attacked' the substance because in many cases it was factually untrue.
stay real please and get your facts right

Many times in the past you have based your decisions and abused your position as the forum police, concerning what I post, purely on our long drawn out dislike of each other, going back years. If you think otherwise then you are in denial. Happy days! Grow up before it's too late.

Report · Sep 10, 2018

osgood_ a écrit
Not sure why you are addressing that post to me, try Nancy, she bought the subject of other professions into the equation.

Sorry, I thought I had replied to my own message in order to post a global reaction on this thread, I didn't want to send it to you in particular

For some reason you and Ben like to start attacking me when your arguments start to fall apart or you dislike what I have to say.....

Sorry... I didn't think I attacked you through my answers... I was just replying to your messages

and rereading the messages I posted... I really didn't perceive any attack whatsoever... despite my poor English

where did you feel I was attacking you so that I could correct my speech if by any chance I should post replies to your messages next time

stay real please and get your facts right. It annoys me when people cant be asked to read the thread properly. Thank you for your co-operation...

Excuse me, what do you mean by "stay real and get your facts right"..... ? I admit I don't understand... everything that has been said in my messages, only reflects my reality... no lies...

changing tab labels to CSS is not accessible
a minimum of accessibility must be included in the developer toolkit
integrate continuous learning into its activity is a necessity
the tools should be able to be used by non-encoders (of course by producing a quality code)
offshore teams work as fast, and sometimes better, than teams working in the same office

all that points are what I'm daily involed in...

Report · Sep 10, 2018

https://forums.adobe.com/people/B+i+r+n+o+u wrote
Sorry, I thought I had replied to my own message in order to post a global reaction on this thread, I didn't want to send it to you in particular

Well in that case you're excused! I thought you were directly replying to my comment which was in response to an issue raised by another poster, which was not completey on track in terms of what the thread was about. Having said that this post WAS NEVER about accessibilty, it was about showing and hiding an element....so in effect it was yourself that move the topic of conversation away from the original question posed by the OP, directly doing something you then berat others for doing

https://forums.adobe.com/people/B+i+r+n+o+u wrote
Sorry... I didn't think I attacked you through my answers... I was just replying to your messages
and rereading the messages I posted... I really didn't perceive any attack whatsoever... despite my poor English
where did you feel I was attacking you so that I could correct my speech if by any chance I should post replies to your messages next time

By using my forum handle to reply to a post which was never initially instigated by me, if you care to re-read the posts.

https://forums.adobe.com/people/B+i+r+n+o+u wrote
Excuse me, what do you mean by "stay real and get your facts right"..... ?

What I mean is reply to the correct poster of the post if you object to the thread going off on on a tangent, nothing more nothing less.

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

1 Correct answer