Question

194

how to expand the text on clicking the read more button or link?

rated 0 times [ 195] [ 1] / answers: 1 / hits: 25518 / 10 Years ago, thu, december 25, 2014, 12:00:00

I have a js function which toggles between two spans of texts. One is smaller text with class collapsed and the other is full text with class expanded.

here is my js

$(document).ready(function() {

    $(.expanded).hide();



    $(.expanded, .collapsed).click(function() {

        $(this).parent().children(.expanded, .collapsed).toggle();

    });

});

and my html look like this

<span class=collapsed>

 some small text

 <a href=javascript:void(0)> READ MORE>></a>

</span>



<span class=expanded>

 here come the full text to replace the small text

 <a href=javascript:void(0)>Less>></a>

</span>

The preset function replaces the text of one part with another. My problem is that when we click on any part of any span either collapsed or expanded, the text is changed. I want to restrict it to change the text only when one click the READ MORE>> or Less>> link. I have gone so far in this design that I cant change the function now. I want changes while staying the in present function. Any ideas??

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

harleyaleenag

Add To Favorites

Follow

Total Points: 678

Total Questions: 121

Total Answers: 105

Location: Papua New Guinea

Member since Thu, Jul 9, 2020

4 Years ago

harleyaleenag questions

1 How to use redis client in nestjs?

Thu, May 5, 22, 00:00, 2 Years ago

1 After build via Webpack 5 app stoped working on Internet Explorer (IE11)

Thu, Oct 22, 20, 00:00, 4 Years ago

1 TypeScript type for value of key in object

Wed, Aug 19, 20, 00:00, 4 Years ago

1 GDPR: youtube-nocookie embedded URL's, need visitors' permission?

Tue, May 19, 20, 00:00, 4 Years ago

1 How to wait for fetch to complete before rendering page in React.js

Thu, Mar 5, 20, 00:00, 4 Years ago

View All

answered 10 Years ago rebekahalysah · Accepted Answer

$(document).ready(function() {

    $(.expanded).hide();



    $(.expanded a, .collapsed a).click(function(eve) {

        eve.preventDefault();

        $(.expanded, .collapsed).toggle();

    });

});

fiddle

UPDATE

To solve the problem related to the posts.

$(document).ready(function() {

    $(.expanded).hide();



    $(.expanded a, .collapsed a).click(function(eve) {

        var $container = $(this).parents(div);

        eve.preventDefault();

        $container.children(.expanded, .collapsed).toggle();

    });

});

fiddle

Note that this code takes for granted that the spans are contained in a div (change if otherwise).

Hope that helps or at least gives you some ideas.

Kind regards.