Skip to main content
kineticcreative123
kineticcreative123
Inspiring
Sep 5, 2018 8:19 PM UTC
Answered

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

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>

    This topic is closed to new replies. Start a new post to keep the conversation going.
    Jon Fritz
    Jon FritzCorrect answer
    Community Expert
    Sep 5, 2018 8:25 PM UTC

    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;

    }

    View reply

    77 replies

    kineticcreative123
    kineticcreative123Author
    Inspiring
    Sep 6, 2018 4:15 PM UTC

    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.

    Translate
    osgood_
    Legend
    Sep 6, 2018 7:19 PM UTC

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

    Translate
    B i r n o u
    B i r n o u
    Legend
    Sep 7, 2018 4:47 AM UTC

    yep... but not accessible...

    Translate
    kineticcreative123
    kineticcreative123Author
    Inspiring
    Sep 5, 2018 9:11 PM UTC

    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.

    Translate
    osgood_
    Legend
    Sep 6, 2018 12:20 AM UTC

    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:

    <script>

    $(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>

    Translate
    B i r n o u
    B i r n o u
    Legend
    Sep 6, 2018 5:02 AM UTC

    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';

    })

    Translate
    ALsp
    ALsp
    Legend
    Sep 5, 2018 8:35 PM UTC

    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

    Translate
    kineticcreative123
    kineticcreative123Author
    Inspiring
    Sep 5, 2018 8:41 PM UTC

    nevermind that didn't work

    Translate
    Jon Fritz
    Community Expert
    Jon FritzCommunity ExpertCorrect answer
    Community Expert
    Sep 5, 2018 8:25 PM UTC

    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;

    }

    Translate
    kineticcreative123
    kineticcreative123Author
    Inspiring
    Sep 5, 2018 8:50 PM UTC

    Thanks John,

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

    Translate
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    Sep 5, 2018 8:24 PM UTC

    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

    Translate
    Nancy O'Shea— Product User & Community Expert
    kineticcreative123
    kineticcreative123Author
    Inspiring
    Sep 5, 2018 8:37 PM UTC

    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');               

                }       

            });

               

        });

    Translate
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    Sep 5, 2018 8:55 PM UTC

    Show us your test page online please.

    Translate
    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices