Code

Hide/Show Element from <select>

Dynamically hide/show elements based on the <select> option in Webflow. A great way of showing various elements based on the dropdown selection. This could be used for changes views, changing images and much more.

Open the demo

How to add it

Add the Javascript code to your bodys closing custom code section
Update the class names to your relevant classes

The code

Javascript

                      <!-- Add to closing body section -->
<script>
$(document).ready(function() {
		$('.box').hide(); //hide
		$('.red').show(); //set default class to be shown here, or remove to hide all
});
$('select').change(function() { //on change do stuff
		$('.box').hide(); //hide all with .box class
		$('.' + $(this).val()).show(); //show selected option's respective element
});
</script>