jQuery remove() and other methods work once, but same code doesn't work in reverse

Question

This is a little long, so stay with me. At the request of my teacher, I'm building a pile of text, some of which is hidden, and I want to add a "more" text at the end. When clicking it, that line is removed and replaced with a "less" text, the hidden text is revealed, and if I click the "less" text it reverts to the original position. Here's what I have so far:

<p>
            The original Wheel of Time RPG was released in 2001 under the D20 rules. This website was built while Dungeons and Dragons' 5th edition (also known as D&D Next) is only days after release. These restrictions made it difficult to adopt some of the larger aspects of the game, such as prestige classes, feats and skills.<br /><br />
            <span class="hidden">
                None the less, this document presents an attempt to balance between the D&D 5th edition rules and the Wheel of Time universe as presented in both the Wheel of Time series by Robert Jordan and the Wheel of Time Roleplaying Game.<br /><br />
                While using terms and general mechanics, this document does not include the rules of the D&D system. In order to understand how combat, weave slots, etc. work, you need to purchase the D&D 5th edition Player’s Handbook.<br /><br />
                This document also does not explain many of the terms, cultures, geography, etc. of the Wheel of Time. Most of what you need to know is described in the Wheel of Time Roleplaying Game sourcebook.<br /><br />
                The system adopted to accommodate the new D&D rules was to incorporate most Prestige Classes in the Wheel of Time Roleplaying Game as paths that the characters may follow. In many cases, I found this system actually resembles the Wheel of Time series better than the original source book. For example, we were able to incorporate the One Power Traditions to the Initiate, depending on her origin.<br /><br />
                In other cases, more drastic changes were made. If you are playing a channeler, make sure to read through the entire Channeling chapter, since many changes were made to the channeling system. For example, Power Heightened Senses no longer requires a feat. It is a feature every channeler receives the moment he touches the One Power.<br /><br />
                This document is far from a complete overhaul. The GM is still required to adjust many technical and numerical details from the original RPG, such as monster, NPC statistics, certain types of weapons and equipment, etc. <br /><br />
                I hope you enjoy this updated version, as much as I enjoyed working on it.
            </span>
        </p>

And the Jquery commands:

    $("span.hidden").ready(function () {
    var more = "<p class=\"click\" display=\"inline\">[...more]</p>";
    var less = "<p class=\"clicked\" display=\"inline\">[...less]</p>";
    if ($("span.hidden").css('display') == "none") {
        $(more).insertAfter("span.hidden");
    }
    else {
        $(less).insertAfter("span.unhidden");
    }

    $(".click").click(function () {
        $("span.hidden").toggleClass("unhidden");
        $("span.hidden").toggleClass("hidden");
        $(less).insertAfter("span.unhidden");
        $("p").remove(".click");
    });

    $(".clicked").click(function () {
        $("span.unhidden").toggleClass("hidden");
        $("span.unhidden").toggleClass("unhidden");
        $(more).insertAfter("span.hidden");
        $("p").remove(".clicked");
    });
});

Now here's the weird part: the functions work perfectly until the last one. The "more" is added, when I click it it is replaced by the "less" and the span is revealed... But the last function, which is identicle to the previous on in every way except the class names, doesn't work! I have checked the html DOM using F12 in chrome, and all the classes indeed change as they should after the second function, but nothing happens when I press the "less" text...

Any ideas what I'm doing wrong?

Thanx for the help!

Answer 1

You don't need to remove and add any DOM elements to achieve this functionality.

Simply use JQuerys .toggle() function do show and hide the text. Also, when clicked, just change the text of the "button".

Solution using .each()

Working example: JSFiddle

HTML

<p class="moreOrLessText">
    The original Wheel of Time RPG was released in 2001 under the D20 rules. This website was built while Dungeons and Dragons' 5th edition (also known as D&D Next) is only days after release. These restrictions made it difficult to adopt some of the larger aspects of the game, such as prestige classes, feats and skills.<span class="moreText"><br />
    <br />None the less, this document presents an attempt to balance between the D&D 5th edition rules and the Wheel of Time universe as presented in both the Wheel of Time series by Robert Jordan and the Wheel of Time Roleplaying Game.<br />
    <br />
    While using terms and general mechanics, this document does not include the rules of the D&D system. In order to understand how combat, weave slots, etc. work, you need to purchase the D&D 5th edition Player’s Handbook.<br />
    <br />
    This document also does not explain many of the terms, cultures, geography, etc. of the Wheel of Time. Most of what you need to know is described in the Wheel of Time Roleplaying Game sourcebook.<br />
    <br />
    The system adopted to accommodate the new D&D rules was to incorporate most Prestige Classes in the Wheel of Time Roleplaying Game as paths that the characters may follow. In many cases, I found this system actually resembles the Wheel of Time series better than the original source book. For example, we were able to incorporate the One Power Traditions to the Initiate, depending on her origin.<br />
    <br />
    In other cases, more drastic changes were made. If you are playing a channeler, make sure to read through the entire Channeling chapter, since many changes were made to the channeling system. For example, Power Heightened Senses no longer requires a feat. It is a feature every channeler receives the moment he touches the One Power.<br />
    <br />
    This document is far from a complete overhaul. The GM is still required to adjust many technical and numerical details from the original RPG, such as monster, NPC statistics, certain types of weapons and equipment, etc. <br />
    <br />
    I hope you enjoy this updated version, as much as I enjoyed working on it.</span> <a class="moreLess">[...more]</a>
</p>

<p class="moreOrLessText">
    The original Wheel of Time RPG was released in 2001 under the D20 rules. This website was built while Dungeons and Dragons' 5th edition (also known as D&D Next) is only days after release. These restrictions made it difficult to adopt some of the larger aspects of the game, such as prestige classes, feats and skills.<span class="moreText"><br />
    <br />None the less, this document presents an attempt to balance between the D&D 5th edition rules and the Wheel of Time universe as presented in both the Wheel of Time series by Robert Jordan and the Wheel of Time Roleplaying Game.<br />
    <br />
    While using terms and general mechanics, this document does not include the rules of the D&D system. In order to understand how combat, weave slots, etc. work, you need to purchase the D&D 5th edition Player’s Handbook.<br />
    <br />
    This document also does not explain many of the terms, cultures, geography, etc. of the Wheel of Time. Most of what you need to know is described in the Wheel of Time Roleplaying Game sourcebook.<br />
    <br />
    The system adopted to accommodate the new D&D rules was to incorporate most Prestige Classes in the Wheel of Time Roleplaying Game as paths that the characters may follow. In many cases, I found this system actually resembles the Wheel of Time series better than the original source book. For example, we were able to incorporate the One Power Traditions to the Initiate, depending on her origin.<br />
    <br />
    In other cases, more drastic changes were made. If you are playing a channeler, make sure to read through the entire Channeling chapter, since many changes were made to the channeling system. For example, Power Heightened Senses no longer requires a feat. It is a feature every channeler receives the moment he touches the One Power.<br />
    <br />
    This document is far from a complete overhaul. The GM is still required to adjust many technical and numerical details from the original RPG, such as monster, NPC statistics, certain types of weapons and equipment, etc. <br />
    <br />
    I hope you enjoy this updated version, as much as I enjoyed working on it.</span> <a class="moreLess">[...more]</a>
</p>

CSS

.moreLess {
    cursor: pointer;
}

.moreText {
    display: none;
}

JQuery

$(function() {

    $('.moreOrLessText').each(function() {

        var self = $(this),
            moreLessButton = self.find('.moreLess'),
            moreText = self.find('.moreText');

        moreLessButton.click(function() {

            moreText.stop().toggle();

            if(moreText.is(':visible')) {

                moreLessButton.text('[...less]');

            }
            else {

                moreLessButton.text('[...more]');

            }

        });

    });

});

Solution not using .each()

Working example: JSFiddle

JQuery

$(function() {

    $('.moreLess').click(function() {

        var self = $(this),
            moreText = self.siblings('.moreText');

        moreText.stop().toggle();

        if(moreText.is(':visible')) {

            self.text('[...less]');

        }
        else {

            self.text('[...more]');

        }

    });

});

Also, have a look at the .find(), .siblings(), .stop() (not really necessary here since it's not animating), .text() and .is() functions I've used here.

There are a couple of more toggle functions which can be used to animate the showing and hiding the text. See .slideToggle() and .fadeToggle()

Answer 2

You can use: 'jQuery plugin to automatically shorten text in a DIV and add "show more" link.'

Working example: JSFiddle

---

Step 1: Include the jQuery plugin in your HTML

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/viralpatel/jquery.shorten/master/src/jquery.shorten.js"></script>

Step 2: Add the code to shorten any DIV content (we are shortening DIV with class 'text')

<p class="text">
The original Wheel of Time RPG was released in 2001 under the D20 rules. This website was built while Dungeons and Dragons' 5th edition (also known as D&D Next) is only days after release. These restrictions made it difficult to adopt some of the larger aspects of the game, such as prestige classes, feats and skills.<br /><br />
None the less, this document presents an attempt to balance between the D&D 5th edition rules and the Wheel of Time universe as presented in both the Wheel of Time series by Robert Jordan and the Wheel of Time Roleplaying Game.<br /><br />
While using terms and general mechanics, this document does not include the rules of the D&D system. In order to understand how combat, weave slots, etc. work, you need to purchase the D&D 5th edition Player’s Handbook.<br /><br />
This document also does not explain many of the terms, cultures, geography, etc. of the Wheel of Time. Most of what you need to know is described in the Wheel of Time Roleplaying Game sourcebook.<br /><br />
The system adopted to accommodate the new D&D rules was to incorporate most Prestige Classes in the Wheel of Time Roleplaying Game as paths that the characters may follow. In many cases, I found this system actually resembles the Wheel of Time series better than the original source book. For example, we were able to incorporate the One Power Traditions to the Initiate, depending on her origin.<br /><br />
In other cases, more drastic changes were made. If you are playing a channeler, make sure to read through the entire Channeling chapter, since many changes were made to the channeling system. For example, Power Heightened Senses no longer requires a feat. It is a feature every channeler receives the moment he touches the One Power.<br /><br />
This document is far from a complete overhaul. The GM is still required to adjust many technical and numerical details from the original RPG, such as monster, NPC statistics, certain types of weapons and equipment, etc.<br /><br />
I hope you enjoy this updated version, as much as I enjoyed working on it.
</p>

Step 3: You may want to pass the parameters to shorten() method and override the default ones on jQuery.

$(function() {

    $(".text").shorten({
        "showChars" : 200
    });

    // OR
    $(".text").shorten({
        "showChars" : 150,
        "moreText"  : "See More",
    });

    // OR
    $(".comment").shorten({
        "showChars" : 50,
        "moreText"  : "See More",
        "lessText"  : "Less",
    });

});

Answer 3

Did you try re-adding the classes? i.e.

after removing click, try adding clicked and conversely

after removing clicked, add click