Question

I’ve got the following HTML code, which essentially pertains to a post where I announce something in just a few lines, end it with “[…]”, and add a “Read more” link-button at the bottom. When this button is clicked, additional content that’s hidden will fadeIn as the button disappears, leaving visible the introductory text and the one that was hidden — simple enough. Now, I’ve already written the code for this, but the complication comes when I try to also remove that “[…]” (from the post where the click button happened) that I included in the sneak peek. Here’s the HTML:

<div class="entry">
    <p>Welcome. Talk about something briefly and click below for more. [...]</p>    

    <div class="slide-content">
        <p>Hidden content.</p>
    </div>
    <span id="revealer" class="button"><a href="#">Read more</a></span>
</div>

Classes “entry” and “button” belong to my CSS file, while “slide-content” belongs to my .js file to control the fadeIn effect. The ID “revealer” also belongs to the .js file for the same purpose. This HTML is wrapped in a div tag with a class of “box”. This is the format that each post follows, exactly the same format with the same HTML elements — every time an announcement needs to be made, it’s just a matter of putting the content between the paragraph tags and publish. Here is where my problem comes in, since I can’t find a way to remove the “[…]” only in the post where the button has been clicked. I tried doing the following but it resulted in the deletion of all “[…]” throughout multiple posts:

$('.entry p').each(function() {
    var textReplace = $(this).text();
    $(this).text(textReplace.replace('[...]', '')); 
});

Summary:

1. I need to remove the “[…]” text only from the post where the user has clicked on (the “Read more” button). The idea is to have this removed while at the same time the hidden content fades in.
2. I’ve been able to accomplish the above but for all instances of “[…]”. I need to sophisticate my selection by modifying my jQuery code or the HTML.
3. Option 3 is to get rid of this “[…]”, but I would like to leave it there to let the user know she has more content to read, and I would like to have that “Read more” button in all posts for consistency.

~Thanks in advance!

Answer 1

First, you mention you have multiple of these. In that case, this:

<span id="revealer" class="button"><a href="#">Read more</a></span>

will not work. id attribute has to be unique per document, i.e. you can have at most one element with the specific id value.

If you make your HTML (for each of the blocks) like this:

<div class="entry">
    <p>Welcome. Talk about something briefly and click below for more. [...]</p>    

    <div class="slide-content">
        <p>Hidden content.</p>
    </div>
    <span class="revealer button"><a href="#">Read more</a></span>
</div>

and your JS like this:

function replace(fromp) {
    var textReplace = fromp.text();
    fromp.text(textReplace.replace('[...]', ''));
}

$('.revealer').click(function() {
   var fromp = $(this).siblings().eq(0);
   replace(fromp);
});

it will work properly. Working example:

• http://jsfiddle.net/G4t7Q/

Hope this helps.