I have a collapse/expand function that works on everything (Chrome/Firefox/IE/Mobile Safari) but is not working in OSX Safari 8.
I've narrowed it down the to the issue stemming from Safari not recognizing my "maxheight
" variable while all of the other browsers do. If I change the variable to a number it works fine. These expand/collapse
triggers work on content modules with varying max-heights so I need it to be a variable.
Anyone have any experience with Safari causing this issue?
Here is the JS:
jQuery(document).on('click', '.expansion-trigger', function(e) {
var el = jQuery(this).parent().prev('.expansion-holder');
var btn = jQuery(this);
var ex = '.expansion';
var exp = '.expansion-trigger';
var hide = btn.removeClass('show').addClass('hide');
var hd = 'hide';
var sh = 'show';
var ele = jQuery(this).parent().prev().prev();
var maxheight = ele.css('right');
var gpa = btn.parent().parent();
e.preventDefault();
if (btn.hasClass('plus')) {
hide.parent().next(ex).find(exp).removeClass(hd).addClass(sh);
el.animate({
'max-height': 3000
}, 1000);
gpa.find('.blur').slideToggle();
} else if (jQuery('html').hasClass('touch')) {
hide.parent().prev(ex).find(exp).removeClass(hd).addClass(sh);
ele.removeAttr('style');
var marg = ele.offset().top - 60;
jQuery('html, body').animate({
scrollTop: marg
}, 1300);
} else {
hide.parent().prev(ex).find(exp).removeClass(hd).addClass(sh);
ele.animate({
'max-height': maxheight
}, 800);
gpa.find('.blur').delay(400).slideToggle();
}
});
Associated HTML:
<section class="synopsis">
<?php if( $synopsis = get_field('show_synopsis') ) { ?>
<h2 class="content__heading u-mb0">Synopsis</h2>
<div class="synopsis-holder expansion-holder">
<?php echo $synopsis; ?>
<p class="blur"></p>
</div>
<p class="expansion">
<a href="#" class="plus show expansion-trigger">Read more <i class="fa fa-plus"></i>
</a>
</p>
<p class="expansion">
<a href="#" class="minus hide expansion-trigger">Read less <i class="fa fa-minus"></i>
</a>
</p>
<?php } ?>
</section>
This probably isn't the best solution, but I'm using the right
properties in my various holders to reset the max-height
values when the modules collapse back down. For example:
.synopsis-holder {
max-height: 17rem;
overflow: hidden;
right: 17rem;
}
I scrapped using the value of the
right
property and used data-attributes likedata-height="17rem"
in the markup to store and grab the value.