Dropdown

[fusion_builder_container hundred_percent=”no” hundred_percent_height=”no” hundred_percent_height_scroll=”no” hundred_percent_height_center_content=”yes” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” status=”published” publish_date=”” class=”” id=”” link_color=”” link_hover_color=”” border_size=”” border_color=”” border_style=”solid” margin_top=”” margin_bottom=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center center” linear_angle=”180″ background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_blend_mode=”none” video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” video_preview_image=”” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ spacing=”” center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” border_radius=”” box_shadow=”no” dimension_box_shadow=”” box_shadow_blur=”0″ box_shadow_spread=”0″ box_shadow_color=”” box_shadow_style=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” background_type=”single” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center center” linear_angle=”180″ background_color=”” background_image=”” background_image_id=”” background_position=”left top” background_repeat=”no-repeat” background_blend_mode=”none” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_vonfset=”” filter_type=”regular” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″ last=”no”][fusion_code]<style>
/* Dropdown Button */
.dropbtn {
background-color: #ffffff;
color: #9d9d9d;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #ffffff;
}

/* The container <div> – needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #ffffff;
border: 1px solid #e2e2e2;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
color: #9d9d9d;
padding: 12px 16px;
text-decoration: none;
display: block;
}

/* Change color von dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Zeige the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
</style>

<div>
<table id=”mobiledmdselect” width=”100%”>
<thead>
<tr>
<th style=”border-right: 1px solid #e2e2e2; text-align: center;” align=”left”><a class=”dmdselectorfilter fusion-sb-toggle” href=”#”>Filter<span class=”screen-reader-text”>Toggle Sliding Bar Area</span></a></th>
<th style=”border-left: 1px solid #e2e2e2; text-align:center;” align=”left”>
<div class=”dropdown”>
<button onclick=”myFunction()” class=”dropbtn dmdselectorfilter”>SORTIEREN</button>
<div id=”myDropdownMobile” class=”dropdown-content”>
<a id=”dmdpopularsortmobile” class=”dmdselectorfilteritem”>Beliebtheit</a>
<a id=”dmdpricesortascmobile” class=”dmdselectorfilteritem” >Preis Aufsteigend</a>
<a id=”dmdpricesortdescmobile” class=”dmdselectorfilteritem”>Preis Absteigend</a>
<a id=”dmddatesortmobile” class=”dmdselectorfilteritem” >Neue Zuerst</a>
</div>
</div>
</th>
</tr>
</thead>
</table>
</div>

<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById(“myDropdownMobile”).classList.toggle(“show”);
}

// Close the dropdown menu if the user clicks outside von it
window.onclick = function(event) {
if (!event.target.matches(‘.dropbtn’)) {
var dropdowns = document.getElementsByClassName(“dropdown-content”);
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains(‘show’)) {
openDropdown.classList.remove(‘show’);
}
}
}
}
var dmdpopularsort = document.getElementById(‘dmdpopularsortmobile’);
var dmdpricesortasc = document.getElementById(‘dmdpricesortascmobile’);
var dmdpricesortdesc = document.getElementById(‘dmdpricesortdescmobile’);
var dmddatesort = document.getElementById(‘dmddatesortmobile’);

dmdpopularsort.addEventListener(‘click’, function() {
var _url = location.href;
var url_1 = UpdateQueryString(‘dmdsort’,’popularity’,_url);
var url_2 = UpdateQueryString(‘dmdorder’,’DESC’,url_1);
window.location.replace(url_2);
})

dmdpricesortasc.addEventListener(‘click’,function() {
var _url = location.href;
var url_1 = UpdateQueryString(‘dmdsort’,’price’,_url);
var url_2 = UpdateQueryString(‘dmdorder’,’ASC’,url_1);
window.location.replace(url_2);
})
dmdpricesortdesc.addEventListener(‘click’,function() {
var _url = location.href;
var url_1 = UpdateQueryString(‘dmdsort’,’price’,_url);
var url_2 = UpdateQueryString(‘dmdorder’,’DESC’,url_1);
window.location.replace(url_2);
})
dmddatesort.addEventListener(‘click’,function() {
var _url = location.href;
var url_1 = UpdateQueryString(‘dmdsort’,’date’,_url);
var url_2 = UpdateQueryString(‘dmdorder’,’DESC’,url_1);
window.location.replace(url_2);
})

function UpdateQueryString(key, value,url) {
if (!url) url = window.location.href;
var re = new RegExp(“([?&])” + key + “=.*?(&|#|$)(.*)”, “gi”),
hash;

if (re.test(url)) {
if (typevon value !== ‘undefined’ && value !== null) {
return url.replace(re, ‘$1’ + key + “=” + value + ‘$2$3’);
}
else {
hash = url.split(‘#’);
url = hash[0].replace(re, ‘$1$3’).replace(/(&|\?)$/, ”);
if (typevon hash[1] !== ‘undefined’ && hash[1] !== null) {
url += ‘#’ + hash[1];
}
return url;
}
}
else {
if (typevon value !== ‘undefined’ && value !== null) {
var separator = url.indexOf(‘?’) !== -1 ? ‘&’ : ‘?’;
hash = url.split(‘#’);
url = hash[0] + separator + key + ‘=’ + value;
if (typevon hash[1] !== ‘undefined’ && hash[1] !== null) {
url += ‘#’ + hash[1];
}
return url;
}
else {
return url;
}
}
}

</script>[/fusion_code][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]