javascript - how to expand the text on clicking the read more button or link? - Stack Overflow

admin管理员组

文章数量:1220960

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

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

• javascript
• jquery
• html

Share Improve this question Follow edited Dec 25, 2014 at 10:51 Muhammad Kamran asked Dec 25, 2014 at 10:18 Muhammad KamranMuhammad Kamran 56111 gold badge77 silver badges1919 bronze badges 3

• When it's expanded, where is the full text added? in the span after the a tag ? – Billy Commented Dec 25, 2014 at 10:35
• The full text is added in the expanded span before the link. – Muhammad Kamran Commented Dec 25, 2014 at 10:41
• right now the function is expanding the text by clicking any where in the collapsed span either on link or on text. this is the problem i want to restrict it on the link only. – Muhammad Kamran Commented Dec 25, 2014 at 10:42

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 6

You can use Readmore.js

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

EXAMPLE

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

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

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

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();
  });
});

本文标签： javascripthow to expand the text on clicking the read more button or linkStack Overflow