Tuesday, January 16, 2018

Javascript, jQuery - Toggle Between Two Functions

let Partner = {
init() {
const $ = require('jquery');

var $selector = 11;
var $link = document.querySelector('[data-clickme]');
var $list = $('.partnerblock__grid a');
var $listSize = $('.partnerblock__grid a:visible').length;

hideListVisibility($, $list, $selector);

$($link).on('click', function(e) {
e.preventDefault();

if ($(this).attr('data-click-state') == 1) {

$(this).attr('data-click-state', 0)
hideListVisibility($, $list, 11);

} else {
$(this).attr('data-click-state', 1)
showListVisibility($, $list, 48);
}

})

}

};

function hideListVisibility($, $list, $selector) {
$($list).each(function() {
var $elem = $(this);
if ($elem.index() > $selector) {
$elem.addClass("hide");
};
});
}

function showListVisibility($, $list, $selector) {
$($list).each(function() {
var $elem = $(this);
if ($elem.index() < $selector) {
$elem.removeClass("hide");
};
});
}

export default Partner;

No comments:

Post a Comment