Swich between functions
Swich between functions
Hello people,
I am trying to switch between two function based on the screen width, normal/wide screen and mobile. For normal/widescreen I would like to have an overlay functionality and on mobile/tablet I would like to have an accordion function. I have tried a few scripts but I am not happy so far with the results.
Any ideas anybody?
This is my idea so far but it doesnt work:
// Screen width detection
var $window = $(window),
$a = $('#map li a');
if ($window.width() < 800) {
$a.addClass('mobile');
$a.parents("ul").attr("id", "accordion")
// $.function(accord);
}else{
$a.addClass('overlay');
// $.function(overlay);
};
});
//Accordion function
$(function accord(){
var h2First = $("#accordion h2:first");
var h2 = $("#accordion h2");
$(h2First).addClass("active");
$(h2First).next("section").css("display", "block");
$(h2).each(function() {
$(this).attr("title", $(this).text())
});
$(h2).click(function(e){
$(this).toggleClass("active");
$(this).next("section").slideToggle();
e.preventDefault();
});
});
// modal / overlay pop-up window
$(function overlay(){
$('.overlay').on('click', function (popUp) {
$.fn.custombox( this, {
effect: 'fadein'
});
popUp.preventDefault();
});
Thanks in advance!