Show Different Div or HTML elements while selecting different Dropdown option : JQuery and HTML

Basically this code is for advance users who have knowledge about HTML and JQuery.
Here i am sharing you the code which you can use for showing different Div (HTML elements) while selecting different dropdown option (HTML “select” tag). If you have any question feel free to ask question in the comments section.

*** JQuery Part

	<script>
	
	jQuery(document).ready(function() {
 
	jQuery('select.form-control').change(function(){
	  var target = jQuery(this).data('target');
 	  var show = $("option:selected", this).data('show');
 	  jQuery(target).children().addClass('hide');
	  jQuery(show).removeClass('hide');
	});
	});
	</script>

*** HTML Part

<select id="contact-types" class="form-control" data-target=".all-the-forms">
	<option value="">My inquiry is related to:</option>
	<option value="mail" data-show=".mail">Join mailing list</option>
	<option value="product" data-show=".product">Product-related inquiries</option>
	<option value="partnership" data-show=".partnership">Partnership opportunities</option>
	<option value="sales" data-show=".sales">Sales and customer support</option>
	<option value="general" data-show=".general">General inquiries</option>
</select>
<div class="all-the-forms">
	<!-- Product-related inquiries -->
	<div class="product hide"> Hi I am in Product Div</div>
	<!-- Partnership opportunities -->
	<div class="partnership hide">Hi I am in Partnership Div</div>
	<!--Sales and customer support-->
	<div class="sales hide">Hi I am in Sales Div</div>
	<!-- General inquiries -->
	<div class="general hide">Hi I am in General Div</div> 
	<!-- Mailing list -->
	<div class="mail hide">Hi I am in Mail Div</div>
</div>