Trigger dropdown from label click

I’m using nice-select for dropdowns and want to be able to trigger the dropdown from either click of dropdown, or label.
From the element viewer, I can see that select is changed to an UL and a class ‘open’ gets added to a div on dropdown click. So I’ve tried to recreate that click, with no joy.

   <div id="sort-by-wrap"> 
   <h2>SORT BY:</h2> 
   <div id="sort-by">
     <select>
      <option value="Ending Soon" data-sort-by="end_timestamp" data-order="descending">Ending Soon</option>
      <option value="Newly Added" data-sort-by="end_timestamp" data-order="ascending">Newly Added</option>
      <option value="Furthest Distance" data-sort-by="distance" data-order="descending">Furthest Distance</option>
      <option value="Nearest Distance" data-sort-by="distance" data-order="ascending">Nearest Distance</option>
      <option value="Highest Price" data-sort-by="total_price" data-order="descending">Highest Price</option>
      <option value="Lowest Price" data-sort-by="total_price" data-order="ascending">Lowest Price</option>
     </select>
   </div> 
  </div>  

above html changes to below…

With a class added to the intial div (sort-by-wrap), I’ve tried along the lines of…

   $(".label-trigger").click(function(){
var dd = $(this).children(".nice-select");

if($(dd).hasClass("open")){
	console.log('closing');
    $(dd).removeClass("open");
	}
else{
	console.log('opening');
    $(dd).click();
    }
return false;	
});

…and

 var dd = $(this).children(":input");
 with variations of closest, find, .nice-select, addClass('open')

any pointers?

thanks

I didn’t see where your label trigger element was in your code above?

This is not really my area but this works for me.

<div id="sort-by-wrap">
		<h2 class="label-trigger">SORT BY:</h2>
		<div id="sort-by">
				<select>
						<option value="Ending Soon" data-sort-by="end_timestamp" data-order="descending">Ending Soon</option>
						<option value="Newly Added" data-sort-by="end_timestamp" data-order="ascending">Newly Added</option>
						<option value="Furthest Distance" data-sort-by="distance" data-order="descending">Furthest Distance</option>
						<option value="Nearest Distance" data-sort-by="distance" data-order="ascending">Nearest Distance</option>
						<option value="Highest Price" data-sort-by="total_price" data-order="descending">Highest Price</option>
						<option value="Lowest Price" data-sort-by="total_price" data-order="ascending">Lowest Price</option>
				</select>
		</div>
</div> 

JS

<script>
$(document).ready(function() {
  $('select').niceSelect();      		
  $(".label-trigger").click(function(){
		$('#sort-by-wrap .nice-select').toggleClass('open');
		return false;	
	});
});
</script>

If you want it to work on multiple elements and not just by id then you will need to do something like this.

$(document).ready(function() {
  $('select').niceSelect();      		
  $(".label-trigger").click(function(){
		var $parent = $(this).closest('.select-wrap')
		$parent.find('.nice-select').toggleClass('open');
		return false;	
	});
});

html changes:

<div id="sort-by-wrap" class="select-wrap">

Thanks for reply Paul, will give it a go now. I took the snap before adding the class
With a class added to the intial div (sort-by-wrap)…

Would prefer to make the whole container, sort-by-wrap, a trigger - will give it a go.

thanks again

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.