Angled elements in a jQuery accordion list?

Question

I'd like to use something like jQuery's accordion menu, but have the triggered elements be angled. I'm guessing this isn't possible, but thought I'd see if anyone has tried it before.

A few less than ideal ideas:

1. Go old-school and work with image maps. I haven't used an image map in years though, so that'd take a bit of testing to see if it's even possible.
2. Use several target areas for each navigation element and position them in a staggered layout. Pretty hacky and bloated though.
3. Use the rotate capability of fancy browsers. This actually doesn't seem too bad, but obviously not viewable for most users. Also not sure how that would affect the content areas - but could be explored.

Let me know if any clarification is needed.

Here is a sketch of the concept:

Answer 1

Hey Matt!

Yes I believe this can be done. Thinking off of the top of my head this is what you would do. Create angled images for the buttons first. Put those images in order on the HTML markup, with a div element in between each one. So the markup would be something like this.

<img id="bttnOne" src="buttnImg1" onclick="openContent('bttnContentOne');" />
<div id="bttnContentOne" style="display: none">
   content1 content1 content1
</div>

<img id="bttnTwo" src="buttnImg2" onclick="openContent('bttnContentTwo');" />
<div id="bttnContentTwo" style="display: none">
   content2 content2 content2
</div>

You will need to adjust the css to make these fit correctly. A float left on the elements would work well. Now that you have the HTML, you will need to create a function which I called openContent above. You can pass the id of the button being clicked on to that function if you want, or you can come up with a better way to do this.

The openContent function would look something like the following,

function openContent(eleId) {
   $('.activeContent').slideUp('fast');                           //Close the currently opened content tab
   $('#' + eleId).slideDown('slow').class('activeContent');       //Open the new one and set the class
}

Now, im not positive that the slideDown will look correct if it needs to slide to the right, or left. If it does not, then you could try using the animate functionality to get a slide left and right. This is a VERY rough example of how this could be done, so dont expect this code to work, but the main thought process is correct.

Hope this helps!

Metropolis

(EDITED)

The one thing that I personally do not like about that example is how the text also displays diagonally. I believe it would actually be better to go with rectangle boxes that "look" diagonal. Here is a rough ascii sketch :)

---------------------------
|      /| content content |
|     / | content content |
|    /  | content content |
|   /   |                 |
|  /    |                 |
| /     |                 |
|/      |                 |
---------------------------

Another thing I do not like about that particular implementation is all of the div tags that the extension creates for you. It is very inefficient at this point. Hopefully in the future we will be able to do those type of things easily. Right now though, if you want the content to actually be diagonal like that implementation is, you will need to have all of those div tags to get it.

Answer 2

I was just pointed to a jQuery plugin that accomplishes this task pretty well (Diagonal Accordion). I have yet to test it, but it looks like it is limited to 45° angles, which is a bit of a bummer, but still pretty cool.