Toggle hide and show

Question

I have tried everything to get it to toggle show and hide but every time I add hide in the function, it stops working or I can get hide to work flawlessly while show doesn't work at all. Any help would be appreciated.

<div class="ShowHideClicker clear" >
  <img src="something.gif"></div> <div class="ShowHideList"> 
  <div class="ui-widget" id="SearchBar"> 
    <label for="tags">Search:</label> 
    <input id="tags">
    <button class='clear' id="ClearButton"> Clear</button> 
  </div> 
  <div id="Result"></div> 
</div>

$(document).ready(function(){
     $('.ShowHideList').hide();
     $('.ShowHideClicker').click(function(){
          $(this).next().show('drop', {direction: 'left'}, 1000);
     });
});

Answer 1

Here is the simple solution with toggleClass:

$('.ShowHideClicker').on('click', function(){
    $(this).next().toggleClass('hidden');
});

http://jsfiddle.net/LcYLY/

Answer 2

You should be using the .toggle() this way: JSFIDDLE and make sure you have included jQuery and jQuery UI in your header ("drop" is a jQuery UI feature)

jQuery:

$(document).ready(function(){
  $('.ShowHideClicker').click(function(){
    $('.ShowHideList').toggle('drop', 1000);
  });
});

CSS:

.ShowHideList { display: none; }