Jquery Click Event Issue (using toggle)
<p>Basically I have a  three div's (buttons) called #main-minicab-service, #main-courier-service and #main-removal-service. On click of these buttons they show the respective page and hide the following div's: #img-onlinebooking, #main-online-booking and #main-onlinebooking-logo</p>

<p>And when you click the button a second time it shows the #main-online-booking divs again. Although this is working to a certain extent, it doesn't work when you (example) click the minicab service button and then click the courier button.</p>

<p>So that you have an idea of what I am trying to achieve I'll show you a image:</p>

<p><img src="http://i.stack.imgur.com/L3OA0.png" alt="enter image description here"></p>

<p>Basically, what I want to happen is, if you click the <code>minicab service</code> button, it shows the <code>#main-minicab-service</code> div. If you click the <code>minicab service</code> button again, it then shows the three online-booking divs. This part works fine, however, if I click the <code>minicab service</code> button first and then click the <code>courier service</code> button, it shows the <code>#main-courier-service</code> tab, again as it should. But if I then click the <code>minicab service</code> button it then shows the Online-Booking tabs where as I would want it to show the #main-minicab-service` div.</p>

<p>I think the only part that needs fixing is that I would want it to show the online-booking divs only if the same button is clicked twice, otherwise show the div that is clicked.</p>

<p>I hope this makes sense, here is the jquery that I have at the minute:</p>

<pre><code>    /*  Click Events for Buttons */

        /* Courier */

      $("#img-courier").toggle(
        function(){ 

        $('#main-removal-service').hide();
        $('#main-minicab-service').hide();
        $('#img-onlinebooking').fadeOut('slow');
        $('#main-online-booking').fadeOut('slow');
        $('#main-onlinebooking-logo').fadeOut('slow');
        $('#main-courier-service').delay(600).fadeIn('slow');},

        function(){
        $('#main-removal-service').hide();
        $('#main-minicab-service').hide();
        $('#img-onlinebooking').show();
        $('#main-online-booking').show();
        $('#main-onlinebooking-logo').show();
        $('#main-courier-service').hide();
      });

       /* Minicab */

      $("#img-minicab").toggle(
        function(){ 

        $('#main-removal-service').hide();
        $('#main-courier-service').hide();
        $('#img-onlinebooking').fadeOut('slow');
        $('#main-online-booking').fadeOut('slow');
        $('#main-onlinebooking-logo').fadeOut('slow');
        $('#main-minicab-service').delay(600).fadeIn('slow');},

        function(){
        $('#main-removal-service').hide();
        $('#main-courier-service').hide();
        $('#img-onlinebooking').show();
        $('#main-online-booking').show();
        $('#main-onlinebooking-logo').show();
        $('#main-minicab-service').hide();

      });

      /* Removal */

      $("#img-removal").toggle(
        function(){ 

        $('#main-minicab-service').hide();
        $('#main-courier-service').hide();
        $('#img-onlinebooking').fadeOut('slow');
        $('#main-online-booking').fadeOut('slow');
        $('#main-onlinebooking-logo').fadeOut('slow');
        $('#main-removal-service').delay(600).fadeIn('slow');},

        function(){
        $('#main-minicab-service').hide();
        $('#main-courier-service').hide();
        $('#img-onlinebooking').show();
        $('#main-online-booking').show();
        $('#main-onlinebooking-logo').show();
        $('#main-removal-service').hide();

      });
</code></pre>
