Jquery Click Event Issue (using toggle)

Question

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

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.

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

enter image description here

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

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.

I hope this makes sense, here is the jquery that I have at the minute:

    /*  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();

      });

The code is too tightly coupled. Each element has to know about the other elements. If you had 50 elements instead of 3, you would have a disaster. You must redo your code to be more modular. See my solution — sajawikio
– sajawikio, Commented Jan 6, 2013 at 14:26

sajawikio · Accepted Answer · 2013-01-06 14:41:22Z

2

Your code is too tightly coupled. In your code, each element has to know about the other elements. You already see big problems with just 3 elements. If you had 50 elements instead of 3, you would have a real disaster. You must redo your code to be more modular. Consider this as a starting point:

    var allCourierElements = $(".myCourierElement");
    var allCabElements = $(".myCabElement");
    var allWhateverElements = $(".myWhateverElement");
    var allElements = $(".myElement");

    //so in your html, a valid cab element to be hidden or shown
    // would be, for instance:
    //<div class= "myElement myCabElement"></div>

    function func1(event)
    {

       allElements.hide();
       allCourierElements.show();

    }

    function func2(event)
    {

       allElements.hide();
       allCabElements.show();

    }

    function func3(event)
    {

       allElements.hide();
       allWhateverElements.show();

    }

    $("#img-courier").on('click', func1);
    $("#img-minicab").on('click', func2);
    $("#img-whatever").on('click', func3);
    //and so on

edited Jan 6, 2013 at 14:41

answered Jan 6, 2013 at 14:29

sajawikio

1,5147 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

sajawikio Over a year ago

just a starting point. Of course you can even make it so you can have only one function instead of having a function for every single element, and using custom properties of the event object to use just one function and still hide every undesired element / show just the one you want. I'll leave that up to you to figure out if you really need it, if you do really need it comment here and i can give example, but this should be enough for your purposes.

nsilva Over a year ago

Thank you for this, this is a lot better. However, how would I go about showing the Online Booking Divs on second click?

sajawikio Over a year ago

you mean if one of the 3 buttons is clicked twice successively in a row, then it does not show courier, cab, or removal - instead shows online booking? Do I understand correctly? Then if one of them is clicked, and just once it does normal again?

nsilva Over a year ago

That's correct, although thinking about that now it doesn't make much sense to do that as it would not be very user friendly. I think I'll stick with the code you are using and create a side button to switch back to the online booking page if either courier, removal or minicab page is displayed.

Collectives™ on Stack Overflow

Jquery Click Event Issue (using toggle)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related