Question

I am a complete novice to the javascript language.

I followed this tutorial on using Isotope. I decided to attempt to integrate this with nav-pills to create my own filtering. It works nicely, however the menu pop-up will not fade away after I have clicked my filter.

Please see snippets of my code:

            <ul class="nav nav-pills">

                <li id="isotopedemo"><a href="" data-filter="*">Demo All</a></li>

                <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" class="menu">For Sale<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li id="isotope"><a href="" data-filter=".cat1">Demo 1</a></li>
                        <li id="isotopedemo"><a href="" data-filter=".cat2">Demo 2</a></li>
                        <li id="isotopedemo"><a href="" data-filter=".cat3">Demo 3</a></li>
                        <li id="isotopedemo"><a href="" data-filter=".cat4">Demo 4</a></li>
                        <li id="isotopedemo"><a href="" data-filter=".cat5">Demo 5</a></li>
                        <li id="isotopedemo"><a href="" data-filter=".cat6">Demo 6</a></li>
                    </ul>
                </li>

            </ul>



<script type="text/javascript">
    $(document).ready(function(){
    var $container = $('#content');
    $container.isotope({
        filter: '*',
        animationOptions: {
         duration: 750,
         easing: 'linear',
         queue: false,
       }
    });

    $('#isotopedemo a').click(function(){
      var selector = $(this).attr('data-filter');
        $container.isotope({ 
        filter: selector,
        animationOptions: {
         duration: 750,
         easing: 'linear',
         queue: false,

       }
      });
      return false;
    });
    });
</script>

I just want the box to close once its clicked, what makes this even more frustrating is that I am not sure what to search for.

Answer 1

Try this

Live Demo : http://codebins.com/bin/4ldqp7z

$(document).ready(function() {
    var $container = $('#content');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false,
        }
    });


  $(".dropdown").click(function(){
        $(".dropdown-menu").show(400);
  });
    $('#isotopedemo a').click(function() {
        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false,

            }
        });

        $(".dropdown-menu").hide(500);
        return false;
    });
});