jQuery fadeOut closing wrong div

Question

I am using this read more function: https://css-tricks.com/text-fade-read-more/

I am using this feature four times on my page. When I open one div and then another, and then go to close the first div, the second div is closed instead and after than the first div can't be closed.

Is it possible to ensure that the close feature closes the associated div?

Here is the jQuery:

<script>
var jq14 = jQuery.noConflict(true);
(function ($) {
    $(document).ready(function () {
        // your logic

        var mq = window.matchMedia("(min-width: 767px)");

        var $el, $ps, $up, totalHeight;

        $(".fade-box .button-read-on").click(function () {

            totalHeight = 0

            $el = $(this);
            $p = $el.parent();
            $up = $p.parent();
            $ps = $up.find("p:not('.read-more')");

            // measure how tall inside should be by adding together heights of all inside paragraphs (except read-more paragraph)
            $ps.each(function () {
                totalHeight += $(this).outerHeight();
                // FAIL totalHeight += $(this).css("margin-bottom");
            });

            $up
                .css({
                    // Set height to prevent instant jumpdown when max height is removed
                    "height": $up.height(),
                    "max-height": 9999
                })
                .animate({
                    "height": totalHeight
                })
                .click(function () {
                    //After expanding, click paragraph to revert to original state
                    $p.fadeIn();

                    if (mq.matches) {
                        $up.animate({
                            "height": 190
                        });
                    } else {
                        $up.animate({
                            "height": 210
                        });
                    }

                });

            // fade out read-more
            $p.fadeOut();

            // prevent jump-down
            return false;

        });
    });
}(jq14));

And here is the close function in the HTML:

<p class="close">Close <img src="img/arrow-up.png"></p>

I think the problem is that I am using this close HTML numerous times on the page.

Any help would be great thanks.

Answer 1

Move this line

var $el, $ps, $up, totalHeight;

after this line

$(".fade-box .button-read-on").click(function () {

After you click the first one, the variables are set to the correct value for the fist one, but when you click the second one, they are overwritten. Changing their scope makes it so that you can have multiple instances of each variable that each correspond to the right element.