Skip to main content
kineticcreative123
kineticcreative123
Inspiring
September 5, 2018
Answered

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

  • September 5, 2018
  • 5 replies
  • 7500 views

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 has been closed for replies.
    Correct answer Jon Fritz

    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;

    }

    5 replies

    kineticcreative123
    kineticcreative123Author
    Inspiring
    September 6, 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.

    O
    osgood_
    Legend
    September 6, 2018

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

    B i r n o u
    B i r n o u
    Legend
    September 7, 2018

    yep... but not accessible...

    kineticcreative123
    kineticcreative123Author
    Inspiring
    September 5, 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.

    O
    osgood_
    Legend
    September 6, 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:

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

    B i r n o u
    B i r n o u
    Legend
    September 6, 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';

    })

    ALsp
    ALsp
    Legend
    September 5, 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

    kineticcreative123
    kineticcreative123Author
    Inspiring
    September 5, 2018

    nevermind that didn't work

    Jon Fritz
    Community Expert
    Jon FritzCommunity ExpertCorrect answer
    Community Expert
    September 5, 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;

    }

    kineticcreative123
    kineticcreative123Author
    Inspiring
    September 5, 2018

    Thanks John,

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

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    September 5, 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
    kineticcreative123
    kineticcreative123Author
    Inspiring
    September 5, 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');               

                }       

            });

               

        });

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    September 5, 2018

    Show us your test page online please.

    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