I want to achieve following task. When i first clicked on PARISHES class 'search_bx' then it will load the content into the div id 'search_boxes' and second click on same PARISHES then it will hide the content. The same functionality is for SCHOOLS clicks.

challenge is that,when i cross click on anchor tag means now i click on PARISHES then it will load parish url and again i clicked on SCHOOLS then it will load school url in div and again i click on same anchor tag then it will hide vice versa.

Here is html code-

    SEARCH FOR: <a class="search_bx" id="church" href="SearchCS/SearchBoxes.php?type=Church">PARISHES</a>

    a class="search_bx" id="school" href="SearchCS/SearchBoxes.php?type=School">SCHOOLS</a>

    <div id="search_boxes"></div>  //after click event this search_boxes load data

and jquery is-

     $('.search_bx').click(function(){  

        $('#search_boxes').load($(this).attr('href')); 

              var clicks = $(this).data('clicks');

      if (clicks) { 

        $('#search_boxes').hide();

      } else { 

        $('#search_boxes').show();

      }

      $(this).data("clicks", !clicks);     

             return false;

        }); 

Please help to achieve this into above jquery function -

  $('.search_bx').click(function(){   

});