I'm relatively new to jQuery and I'm struggling to understand a problem I have with my event bindings.

I've created a toggle to show/hide the inner info of a three divs. The functionality was ok if none of the sort buttons at the top had been clicked.

If however, any of the top buttons were pressed, the toggle no longer worked. 

To try to get around the problem I've put my function inside another event, but don't know how to remove the original without errors.

To try to demonstrate I've created a fiddle which can be found here: http://jsfiddle.net/dvmac/h58exqsu/15/

Here too is the code in question:

2. $(document).on('click', '.info', function(){
3. $('.switcher').click(function(event)
4. {
5. event.preventDefault();
6. console.log("Switcher clicked");
7. $(this).toggleClass('open');
8. $(this).parent().find(".info-inner").slideToggle("slow");
9. });
10. });

Apologies for any confusion!