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

问题

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

回答1:

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

回答2:

You can use Readmore.js

$('#read').readmore({
  speed: 75,
  maxHeight: 100
});

EXAMPLE

回答3:

How about this ? this will work on classes and is expandable.

$(".expanded a, .collapsed a").click(function() {
        $(this).parent().children(".expanded, .collapsed").toggle();
    });

回答4:

Use this jQuery snippet to dig this issue

jQuery(document).ready(function() {
  jQuery(".expanded").hide();
  jQuery(".collapsed a").click(function() {
    jQuery(this).hide();
    jQuery(".expanded").slideDown();
  }); 
  jQuery(".expanded a").click(function(){
    jQuery(".expanded").slideUp();
    jQuery(".collapsed a").show();
  });
});

来源：https://stackoverflow.com/questions/27646284/how-to-expand-the-text-on-clicking-the-read-more-button-or-link

标签

javascript

jquery

html