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
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
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..
Link to the tabs
Here is the link to the tab “Nice quote“. Enjoy.
Linking to accordions
Now the same thing in accordions.
Lorem
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
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
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.