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

CSS is for styles. Use JavaScript or jQuery to change text when panel is opened or closed.

javascript - Change div text with jQuery Toggle - Stack Overflow

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

Report · Sep 05, 2018

Thanks Nancy,

So is it possible (since I have my styles in place) to just replace open and showpanel below with my style names?

$(document).ready(function(){

$('.open').click(function(){

var link = $(this);

$('.showpanel').slideToggle('slow', function() {

if ($(this).is(":visible")) {

link.text('close');

} else {

link.text('open');

}

});

Report · Sep 05, 2018

Show us your test page online please.

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

Report · Sep 05, 2018

Those are hard-coded. You can change them, but you have to rewrite a whole bunch more lines of script. This is one of the prices of using Bootstrap components. If you choose that tack, you need to resign yourself to either learn CSS and JavaScript (the basics, at least) or rely on the goodness of folks like Jon and Nancy to give you the code you need.

The reason my solution doesn't work is because I used my own Accordion widget, which is a completely visual tool that runs inside Dreamweaver. It has nothing to do with Bootstrap and is geared more towards visual designers rather than coders.

Report · Sep 05, 2018

ALsp wrote
This is one of the prices of using Bootstrap components.

Say what? Tthere is not a single line of Bootstrap contained in the OP's post.

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

Report · Sep 05, 2018

https://forums.adobe.com/people/Nancy+OShea wrote
wrote
This is one of the prices of using Bootstrap components.
Say what? Tthere is not a single line of Bootstrap contained in the OP's post.

I assumed. It is jQuery, though 😉

Report · Sep 05, 2018

I mentioned jQuery but I don't see any reference to that library either. Tha's why I asked to see an online page.

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

Report · Sep 05, 2018

https://forums.adobe.com/people/Nancy+OShea wrote
I mentioned jQuery but I don't see any reference to that library either. Tha's why I asked to see an online page.

The dollar sign is jQuery's hallmark, though a few other libraries use it, so there is usually a way to relinquish it. But in this day and age, and with the plethora of "near-scripters" running around, it's pretty safe to assume a jQuery connection there.

Report · Sep 05, 2018

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;

}

Report · Sep 05, 2018

Thanks John,

Thats for the + and - symbol which I would like to keep. Just wan to change the centered bar text.

Report · Sep 05, 2018

I'm your friendly ACP who happens to be deathly allergic to Bootstrap. But just to add to the answers you've gotten, I recently did a test page for a customer who uses our Accordion widget who had a similar need:

Test Document

You might learn something. Or not

Report · Sep 05, 2018

nevermind that didn't work

Report · Sep 05, 2018

Thanks everyone. Just gonna use Johns fix and swap out the + and - with the text and center. People wanted to the plus and minus to stay but I talked them out of it.

Report · Sep 05, 2018

If you want to swap the (place holder) text, which I assume should be "Show More for "Show Less" you could use the jQuery below, assuming you have the jQuery library linked to your page:

$(document).ready(function(){

$('.accordion').css('cursor' , 'pointer').click(function(){

$(this).next('.accordion_panel').slideToggle();

var text = $(this).find('h3').text();

if(text === "Show More") {

$(this).html('<h3>Show Less</h3>');

}

else {

$(this).html('<h3>Show More</h3>');

}

});

</script>

Report · Sep 05, 2018

I agree that the conditional approach à la vanilla script is very explicit and more affordable for a newbie coder, but since this script is based on jquery, couldn't we propose a more jquery approach and open door to a better coding experience ?

so replacing the snippet

var text = $(this).find('h3').text();

if(text === "Show More") {

$(this).html('<h3>Show Less</h3>');

} else {

$(this).html('<h3>Show More</h3>');

}

by

$(this).find('h3').text( function (i,v) {

return v==='Show More'?'Show Less':'Show More';

})

Report · Sep 06, 2018

https://forums.adobe.com/people/B+i+r+n+o+u wrote
I agree that the conditional approach à la vanilla script is very explicit and more affordable for a newbie coder, but since this script is based on jquery, couldn't we propose a more jquery approach and open door to a better coding experience ?
so replacing the snippet
var text = $(this).find('h3').text();
if(text === "Show More") {
     $(this).html('<h3>Show Less</h3>');
} else {
     $(this).html('<h3>Show More</h3>');
}
by
$(this).find('h3').text( function (i,v) {
     return v==='Show More'?'Show Less':'Show More';
})

Whatever you understand better and makes more sense to you as a coder. I've never found the below format the easiest to understand myself.

return v==='Show More'?'Show Less':'Show More';

Wheres as the longer format makes more logical sense to me when reading throught it. So is it a better coding experience, sure if you understand. Its shorter, which is better.

Some developers use nested scss but Ive never really found that to my liking if I ever use scss. I guess its how your brain works and eyes see things.

Report · Sep 06, 2018

I agree...

In order to clarify my approach, I noticed that many developers consider jquery to be a verbose and heavy, even useless library. It is in this sense that I wanted to point out that we must use such a library, differently than plain vanilla js, in order to be able to exploit its richness and better highlight its interest.

(I'm not saying that what is done in jquery is not feasable in plain valilla js.... I'm just saying that since we use jquery so much to take advantage of it and use it more optimally)

It is true that in this sense, this approach allows us to considerably reduce the size of our algorithms... making them more concise and above all more easily scalable.

that being said, your snippet is nice too... but, don't forget to take into account that the code you provide will remove any sibling to the H3 tag. There will necessarily be some because next to the title there will necessarily be content. so the target must be refined and to avoid any additional heaviness, stored as a variable

Report · Sep 06, 2018

https://forums.adobe.com/people/B+i+r+n+o+u wrote
I agree...
I noticed that many developers consider jquery to be a verbose and heavy, even useless library.

Yes, I've heard that. Its useless if you only have minor coding requirement. I wouldn't attached the jquery library to do what we are discussing if it were the only objective but these days its rare to encounter a website which doesn't harness some jquery plugins or in the case of front end frameworks like Bootstrap which deploys jQuery as default.

As for verbose. I think any workflow can get verbose, jquery is no different in that respect. I'm currently deploying vue js but the more complex the requirements the more verbose that gets, factor in the directives in the html, and especially when vue cannot do everything jquery can do simply and vice versa .You then start having to drop back and use vanilla javascript (which can be verbose compared to jquery) within vue or even jquery for that matter. Nothing is perfect in my opinion. At least jquery has ajax included by default, vue doesnt you have to use some other library like axios, which means linking yet more js, vue-router, more linked js, so what's verbose these days?

Infact I think we will see even more verbose coding as developers, including myself are going to be deploying jquery and vue, to take advantage of the best of both libraries.

https://forums.adobe.com/people/B+i+r+n+o+u wrote
(I'm not saying that what is done in jquery is not feasable in plain valilla js.... I'm just saying that since we use jquery so much to take advantage of it and use it more optimally)

Vanilla js is pretty good and I would prefer in the real world to use that BUT its still such a pain when you want something to fade in and out gracefully, messing around deploying css keyframes, opacity, attaching and then unattaching classes, setting a time out function so the component displays as block when its faded out when in jquery you just have fadeIn, fadeOut etc. Even in vue you have Transitions, although they are nowhere near as good as those of jquery. Vanilla js is getting a lot better, its taking some ideas from jQuery, so I have no idea why developers knock jquery so much. If it wasnt for jQuery vanilla js would still be user-unfriendly.

https://forums.adobe.com/people/B+i+r+n+o+u wrote
It is true that in this sense, this approach allows us to considerably reduce the size of our algorithms... making them more concise and above all more easily scalable.

I agree with that. I try to reduce the amount of code that is needed to do anything whilst still maintaining something which makes sense to me and is written in a logical visual way, that doesnt mean to say its always the shortest way, which of course is bad but I'm less concerned with the minor addition of extra bandwidth and more concerned with how fast I can work out what the code is doing, especially after I come back to a job 6 months later. I deploy a lot of comment throughout the code but even they sometimes doesnt make much sense.

https://forums.adobe.com/people/B+i+r+n+o+u wrote
don't forget to take into account that the code you provide will remove any sibling to the H3 tag. There will necessarily be some because next to the title there will necessarily be content. so the target must be refined and to avoid any additional heaviness, stored as a variable

I was only taking into account what the OP posted, although it didnt make much sense to me just having an <h3> in an accordion header saying 'Show More/Show Less', that would usually be reserved for a button of some kind, not an accordion header, the plus/minus icons do that job. IF there is going to be additional text in the accordion header then another approach would most likely be needed.

Report · Sep 06, 2018

Hi Everyone,

Thanks for all the replies. Some great knowledge. I got it to work by placing the more details, less details copy where the + and - (\002B) was. I removed the <h3>(placeholdertext)</h3> and now just have an empty <h3></h3> tag. Maybe not the best solution but its good now. Here is a link to the page.

Become a High Reliability Organization | Premier

Yes the code is wacky on the page. I'm using the iON interactive platform to calculate real-time answers with landing pages. You can add custom code blocks. I only use them for assessments so all my work isn't done with them:) Just sayin'. I'm enjoying learning to build from scratch and have come a long way with the help from you all.

Thanks again.

Report · Sep 06, 2018

The old 'Less' is 'More' trick - well done. Sometimes things can be over-engineered, well a lot of the time really.

Report · Sep 06, 2018

yep... but not accessible...

Report · Sep 07, 2018

https://forums.adobe.com/people/B+i+r+n+o+u wrote
yep... but not accessible...

I dont think I'd ever get a website finished if I had to take into account every conceivable best practice that we are supposed to be using out there.

In my opinion web-development has all become a bit silly over the last few years in particular, unless you have literally a bottomless pit of money and time to throw at a website. You need a team of experts who are knowledgeable in every aspect of web-development, which is not feasable, unless you are working for some big clients.

I dont really consider the minority of users when Im developing a website, that's not to say I don't care about them, I just dont have the time and finances to consider their needs to the extent that I should do, which is bad, but alas true.

I guess you could also say if someone is using IE8, a minority, my websites wouldnt be accessible to them either. I dont think in this game you can really cater for all conceivable issues, hopefully one tries their best not to alienate anyone deliberateley.

Report · Sep 07, 2018

it's a choice, free for everyone, my remark was just that using CSS to modify the textual content of the page is not an accessible practice... after as I said... it's a choice for everyone...

Report · Sep 07, 2018

https://forums.adobe.com/people/B+i+r+n+o+u wrote
it's a choice, free for everyone, my remark was just that using CSS to modify the textual content of the page is not an accessible practice... after as I said... it's a choice for everyone...

Yes, no problem. I was just pointing out that its not always possible, in terms of time, monatery constraints and lack of expert knowledge for a website to be 100% perfect for everyone.

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

1 Correct answer