Question

I am trying to implement a main-tab which on hover would show sub-tabs

<a href="#" onclick="javascript:displaySubTabs('subTabs', 'tabClasses');" onmouseover="javascript:displaySubTabs('subTabs', 'tabClasses');"><img src="images\img_Classes.png" /></a>

function displaySubTabs(parentTabId, childTabId) {
        $('#' + parentTabId).children().removeClass('show');
        $('#' + childTabId).addClass('show');
    }

I need to implement the same thing on iPad as well.
Now as onmouseover is not supported on iPad, I need to add onclick as well (Now this can be changed to ontouchstart as well)…But the point is I feel like unnecessarily I am adding 2 handlers..

Is there any way by which I can implement this behavior using a compact way.

I am open to all ideas including moving the implementation from JS to CSS. Anything which is more compact and good approach..

Please suggest.

Answer 1

I would suggest that you exclude your hover functionality entirely for the mobile platform version. Reason being that you explain, it just doesn’t work. Just leave the sub menus open, and have them change in accordance to the main tab thats being interacted with.