Geek Answers Handbook

JQuery fadeOut closing the wrong div

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

I use this function four times on my page. When I open one div and then another, and then proceed to close the first div, the second div closes instead, after which the first div cannot be closed.

Is it possible to guarantee that the close function closes the associated div?

Here is 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 cramped function in HTML:

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

I think the problem is that I use this cramped HTML many times on the page.

Any help would be greatly appreciated.

+5
source share
2 answers

Move this line

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

after this line

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

After you click the first, the variables will be set to the correct value for the first, but when you click the second, they will be overwritten. Changing their scope makes it possible for you to have multiple instances of each variable, each of which corresponds to the correct element.

+4
source

Here's a quick exercise to find out if there is a more readable way. If you use something like rel , it will be clear that for JS, unlike CSS styles. It hides content with a whole height of your choice and targets any selector you want. For each element that you want this to happen ... It will capture its natural height and store it in the data attribute of the element. Then, when you click the read more button, it will occupy that height and use it for animation.

http://codepen.io/sheriffderek/pen/rLYdky

Markup

 <article rel='reveal'> <h2>Thing 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat quaerat molestiae voluptas soluta officia veniam ad, alias fuga sit, adipisci, similique harum odio eos vel. Et, numquam, error. Doloribus, ipsa!</p> ... <button>More</button> </article>


Javascript

 (function() { // closure for this program // so nothing leaks... var hideContent = function(element, maxHeight) { $('[rel="reveal"]').each( function() { var naturalHeight = $(this).outerHeight(); $(this).data('height', naturalHeight); $(this).css('height', maxHeight); }); }; $('[rel="reveal"]').on('click', function() { var naturalHeight = $(this).data('height'); var speed = naturalHeight*2; // relative to height maybe? $(this).find('button').fadeOut(); $(this).animate({ 'height': naturalHeight }, speed); }); hideContent('[rel="reveal"]', 200); })();
0
source

More articles:


All Articles