Home/ Questions/Q 3801550
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T14:04:03+00:00

I have a page which has 6 block menu choices and when you click

  • 0

I have a page which has 6 block menu choices and when you click one (e.g. ‘4’) it shows block 4 content in a DIV opposite and will show the block as selected with an arrow.

When you click another block (e.g. ‘1’) it will unselect 4 and then select 1 displaying block 1’s content in the DIV.

I’m looking for the best script to do this in JS or jQuery. I’m guessing I could build the blocks as a listed menu and when selected, the CSS will display an image with the arrow.

Thanks

Update: Here’s a mockup of what it will look like:

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Another option instead of building yourself or jQueryUI tabs, I would prefer jQuery Tools Tabs:

    http://flowplayer.org/tools/tabs/

    They can be easily customized to your situation with some CSS adjustments:

    http://flowplayer.org/tools/demos/tabs/skins.html

    (just use some floats and width changes here to get what you’re asking for, where XXX+YYY == width of wrapper)

    #panes     { width:XXXpx; float:right; }
#nav       { width:YYYpx; }
#nav ul    { width:YYYpx; float:left; margin:0; padding:0; }
#nav ul li { width:YYYpx; display:block; margin:0; padding:0; } /* no float! */
    • 0