Menu icon Foundation
Making a new panel when an option in a dropdown menu is clicked.

I am trying to make it where when you click an option in a dropdown menu it opens a Panel explaining what the option does.

<div class="row">
            <div class="large-12 columns">
              <label>Label</label>
               <select onchange="jsFunction()">
    		   <option value="blank"></option>
                 <optgroup label="Label">
				   <option value="Item #1">Item #1</option>
				   <option value="Item #2">Item #2</option>
				   <option value="Item #3">Item #3</option>
			     </optgroup>
			     <optgroup label="Label">
				   <option value="Item #4">Item #4</option>
				   <option value="Item #5">Item #5</option>
				   <option value="Item #6">Item #6</option>
				   <option value="Item #7">Item #7</option>
			     </optgroup>
			  </select>
            </div>
          </div>
            

         

dropdownpanelhelphtml

I am trying to make it where when you click an option in a dropdown menu it opens a Panel explaining what the option does.

<div class="row">
            <div class="large-12 columns">
              <label>Label</label>
               <select onchange="jsFunction()">
    		   <option value="blank"></option>
                 <optgroup label="Label">
				   <option value="Item #1">Item #1</option>
				   <option value="Item #2">Item #2</option>
				   <option value="Item #3">Item #3</option>
			     </optgroup>
			     <optgroup label="Label">
				   <option value="Item #4">Item #4</option>
				   <option value="Item #5">Item #5</option>
				   <option value="Item #6">Item #6</option>
				   <option value="Item #7">Item #7</option>
			     </optgroup>
			  </select>
            </div>
          </div>
            

         
Rafi Benkual about 4 years ago

You can do this with some jQuery

$(function() {
  $('[data-toggle]').click(function() {
    $('.panel').toggleClass('is-visable');
  })
});