WP UI – Linking to Tabs, accordions and spoiler

From version 0.8.5, it is now possible to awesomely link and activate widgets – tabs,accordions and spoilers accordingly. With the help of jQuery BBQ plugin, this functionality is now fully supported.


Linking to tabs

Writing

Image by Dr.Bala

The child

All children, except one, grow up. They soon know that they will grow up, and the way Wendy knew was this. One day when she was two years old she was playing in a garden, and she plucked another flower and ran with it to her mother. I suppose she must have looked rather delightful, for Mrs. Darling put her hand to her heart and cried, “Oh, why can’t you remain like this for ever!” This was all that passed between them on the subject, but henceforth Wendy knew that she must grow up. You always know after you are two. Two is the beginning of the end.

Photograph by Aceticacid

Nice Quotes

Some block quote tests:

Here’s a one line quote.

This part isn’t quoted. Here’s a much longer quote:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In dapibus. In pretium pede. Donec molestie facilisis ante. Ut a turpis ut ipsum pellentesque tincidunt. Morbi blandit sapien in mauris. Nulla lectus lorem, varius aliquet, auctor vitae, bibendum et, nisl. Fusce pulvinar, risus non euismod varius, ante tortor facilisis lorem, non condimentum diam nisl vel lectus. Nullam vulputate, urna rutrum vulputate molestie, sapien dolor adipiscing nisi, eu malesuada ipsum lectus quis est.

And some trailing text.

Tables

Table Layout Test

Title Views
About Test User 1 More
260 1 More
Archives 1 More
235 1 More

Align


Left-aligned image with no caption, and text before and after. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed odio nibh, tincidunt adipiscing, pretium nec, tincidunt id, enim. Fusce scelerisque nunc vitae nisl. Quisque quis urna in velit dictum pellentesque. Vivamus a quam. Curabitur eu tortor id turpis tristique adipiscing. Morbi blandit. Maecenas vel est. Nunc aliquam, orci at accumsan commodo, libero nibh euismod augue, a ullamcorper velit dui et purus. Aenean volutpat, ipsum ac imperdiet fermentum, dui dui suscipit arcu, vitae dictum purus diam ac ligula.

So in the above tabset – Say you’d like to link to the tab Tables. Link to the tab now would be

http://kav.in/projects/blog/linking-to-tabs-accordions-and-spoilers-in-wp-ui/#tables

To find the link to the tab, Just mouse over to your desired tab and see the bottom of browser’s status bar. Or you can just right click on the tab and copy link..

Copy the tab's link

Link to the tabs

Here is the link to the tab “Nice quote“. Enjoy.


Linking to accordions

Now the same thing in accordions.

Lorem

Image by Dr.Bala

The child

All children, except one, grow up. They soon know that they will grow up, and the way Wendy knew was this. One day when she was two years old she was playing in a garden, and she plucked another flower and ran with it to her mother. I suppose she must have looked rather delightful, for Mrs. Darling put her hand to her heart and cried, “Oh, why can’t you remain like this for ever!” This was all that passed between them on the subject, but henceforth Wendy knew that she must grow up. You always know after you are two. Two is the beginning of the end.

Photograph by Aceticacid

Ipsum

Some block quote tests:

Here’s a one line quote.

This part isn’t quoted. Here’s a much longer quote:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In dapibus. In pretium pede. Donec molestie facilisis ante. Ut a turpis ut ipsum pellentesque tincidunt. Morbi blandit sapien in mauris. Nulla lectus lorem, varius aliquet, auctor vitae, bibendum et, nisl. Fusce pulvinar, risus non euismod varius, ante tortor facilisis lorem, non condimentum diam nisl vel lectus. Nullam vulputate, urna rutrum vulputate molestie, sapien dolor adipiscing nisi, eu malesuada ipsum lectus quis est.

And some trailing text.

Dolor

Table Layout Test

Title Views
About Test User 1 More
260 1 More
Archives 1 More
235 1 More

Align


Left-aligned image with no caption, and text before and after. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed odio nibh, tincidunt adipiscing, pretium nec, tincidunt id, enim. Fusce scelerisque nunc vitae nisl. Quisque quis urna in velit dictum pellentesque. Vivamus a quam. Curabitur eu tortor id turpis tristique adipiscing. Morbi blandit. Maecenas vel est. Nunc aliquam, orci at accumsan commodo, libero nibh euismod augue, a ullamcorper velit dui et purus. Aenean volutpat, ipsum ac imperdiet fermentum, dui dui suscipit arcu, vitae dictum purus diam ac ligula.

Linking to accordions can be slightly tricky. Browsers dont show mouseover anchor captions, but the mechanism is same as with tabs.

Link to the first accordion panel would be


http://kav.in/projects/blog/linking-to-tabs-accordions-and-spoilers-in-wp-ui/#lorem

Generally Hash part ( one after the # ) is lowercase version of your title. If your title has spaces, they are replaced with underscores ( Nice Tie becomes #nice_tie). Chrome inspector or Firefox with Firebug can be extremly helpful to find the accordion and spoiler’s links.

Caution : Duplicate titles

Duplicate titles are not uncommon within a page, when present link’s hash part is appended with a number. Right click on accordion title -> Inspect element to find out the URL in such cases.


Linking to Spoilers

Linking to spoilers is pretty much the same as accordions. Hash part is lowercase stripped version of name you give it.

My spoiler

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat.

Link to this spoiler would be



http://kav.in/projects/blog/linking-to-tabs-accordions-and-spoilers-in-wp-ui/#my_spoiler

Click to try it.

Notes:

  • You cannot toggle spoilers by reclicking same links without resetting the url first(#)
  • Removing the hash part reloads the URL when in the same page.
  • Disable enable linking functionality with WP UI Options page -> Advanced ->Linking and history

Happy linking.

Comments are closed. Please use Support forum for questions.