Birdhouse Websites and Designs

Moving Your Business ONLINE?

Contact Us Today!

The Goal:
Show which list item was selected in another div container

Sometimes you want text to dynamically change to show the user which element they selected. This tutorial uses jQuery to grab the content and place it into another div each time a list item is selected.

Requirements:

  • HTML & CSS
  • jQuery

Before

After

HTML

Add this to your HTML code.

This is where we’ll be getting the text data from regarding the list item selected

<ul class="simplefilter">
   <li class="" data-filter="all">Everything</li>
   <li data-filter="1" class="active">Stores</li>
   <li data-filter="2">Creative</li>
   <li data-filter="3">Amazon</li>
</ul>

This is the container where the text will change depending on the selected list item.

Show me <span class="current-selection">Everything</span>

jQuery

Add this to your custom scripts. Make sure you have jQuery installed.

jQuery(document).ready(function(){

    jQuery('input[type="file"]').change(function(e){

        var fileName = e.target.files[0].name;

        $(".the-file").html("<b>" + fileName + "</b>");        

    });

});
%d bloggers like this: