У меня небольшая проблема с аккордеоном на моем сайте. Я показываю несколько событий в виде календаря, который работает нормально. Настроил его на открытие первой записи при загрузке сайта, что тоже отлично работает. Проблема в том, что у меня есть несколько фильтров для отображения этих событий (например, категория, год, месяц ...), вызывающих с помощью AJAX-запроса. После того, как я использовал какой-либо из этих фильтров, невозможно автоматически открыть первое событие аккордеона, как оно есть, когда мой сайт загружается. Надеюсь, вы поняли мою проблему, потому что мой английский не так хорош :)
HTML для одного из фильтров:
<div class="col-md-15 col-sm-3">
<select id="month-event-filter" name="month" disabled>
<?php if ( !$detect->isMobile() ) { ?>
<option value=""><?php _e( "Month", "themesdojo" ); ?></option>
<?php } else { ?>
<option value=""><?php _e( "Alle Monate", "themesdojo" ); ?></option>
<?php } ?>
<option value="1"><?php _e( "January", "themesdojo" ); ?></option>
<option value="2"><?php _e( "February", "themesdojo" ); ?></option>
<option value="3"><?php _e( "March", "themesdojo" ); ?></option>
<option value="4"><?php _e( "April", "themesdojo" ); ?></option>
<option value="5"><?php _e( "May", "themesdojo" ); ?></option>
<option value="6"><?php _e( "June", "themesdojo" ); ?></option>
<option value="7"><?php _e( "July", "themesdojo" ); ?></option>
<option value="8"><?php _e( "August", "themesdojo" ); ?></option>
<option value="9"><?php _e( "Setpember", "themesdojo" ); ?></option>
<option value="10"><?php _e( "October", "themesdojo" ); ?></option>
<option value="11"><?php _e( "November", "themesdojo" ); ?></option>
<option value="12"><?php _e( "December", "themesdojo" ); ?></option>
</select>
HTML (PHP) моего аккордеона:
if ($start_date_cal_m <> $prevMonth) {
// if a new year we definitely need to close the previous accordion div
// unless it's the first iteration
if ($prevDay) {
echo '</div><!-- close accordion div 1-->';
}
echo "<h3>$start_date_cal_m_name</h3>\n";
}
if ($start_date_cal_m <> $prevMonth || $start_date_cal_d <> $prevDay) {
// if new month but not new year close accordion
if ($start_date_cal_m == $prevMonth) {
echo '</div><!-- close accordion div 2-->';
}
echo "<button class=\"accordion\">$start_date_cal_d_name, $start_date_cal_d.$start_date_cal_m.</button>\n";
echo "<div class=\"panel\">\n";
}
Аккордеонный Javascript:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
acc[0].onclick();
Фильтр запросов:
jQuery(function($) {
jQuery("#location-events").change(function() {
jQuery('#my_listings_current_page').val("1");
$.fn.tdSubmitFilter();
});
jQuery("#category-events").change(function() {
jQuery('#my_listings_current_page').val("1");
$.fn.tdSubmitFilter();
});
var val = jQuery("#year-event-filter").val();
if( val === "" ) {
jQuery("#month-event-filter").attr('disabled', 'disabled');
} else {
jQuery("#month-event-filter").removeAttr('disabled');
}
jQuery("#year-event-filter").change(function() {
jQuery('#my_listings_current_page').val("1");
var val = jQuery(this).val();
if( val === "" ) {
jQuery("#month-event-filter").attr('disabled', 'disabled');
jQuery("#month-event-filter").val("");
jQuery("#day-event-filter").attr('disabled', 'disabled');
jQuery("#day-event-filter").val("");
} else {
jQuery("#month-event-filter").removeAttr('disabled');
}
$.fn.tdSubmitFilter();
});
var val2 = jQuery("#month-event-filter").val();
if( val2 === "" ) {
jQuery("#day-event-filter").attr('disabled', 'disabled');
jQuery("#day-event-filter").val("");
} else {
jQuery("#day-event-filter").removeAttr('disabled');
}
jQuery("#month-event-filter").change(function() {
jQuery('#my_listings_current_page').val("1");
var val = jQuery(this).val();
if( val === "" ) {
jQuery("#day-event-filter").attr('disabled', 'disabled');
} else {
jQuery("#day-event-filter").removeAttr('disabled');
}
$.fn.tdSubmitFilter();
});
jQuery("#day-event-filter").change(function() {
jQuery('#my_listings_current_page').val("1");
$.fn.tdSubmitFilter();
});
jQuery(document).on("click",".pagination a.page-numbers",function(e){
var hrefprim = jQuery(this).attr('href');
var href = hrefprim.replace("#", "");
jQuery('#my_listings_current_page').val(href);
$.fn.tdSubmitFilter();
e.preventDefault();
return false;
});
$.fn.tdSubmitFilter = function() {
jQuery("html, body").animate({ scrollTop: 0 }, 800);
jQuery('#td-filter-events').ajaxSubmit({
type: "POST",
data: jQuery('#td-filter-events').serialize(),
url: '<?php echo admin_url('admin-ajax.php'); ?>',
beforeSend: function() {
jQuery(".upcoming-events-holder").fadeOut(200);
jQuery(".upcoming-events-holder").html("");
jQuery(".listing-loading").css("display", "inline-block");
},
success: function(response) {
jQuery(".listing-loading").css("display", "none");
jQuery(".upcoming-events-holder").html(response);
jQuery(".upcoming-events-holder").fadeIn(200);
}
});
}
});