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

• 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

4 Answers 4

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