kiwi
Adding tabbed sections to a webtrees “story”

If you use the “stories” module in webtrees, you will have noticed that long stories can require a lot of scrolling down the page to completely read them.

Some people are quite happy with that display style. But personally I prefer to break a long story into logical “pages”.

It is actually quite easy to do this within the stories module, providing you have some basic understanding of HTML code.

First you need to wrap your entire story in a single <div> element, with a unique id such as “story_tabs”:

<div id="story_tabs">
      Your story content
</div>

Next give your tabs some titles, using html <ul> and <li> tags. Note that you must also use the <a> and <span> tags shown here.

<div id="story_tabs">
     <ul>
        <li><a href="#sub1"><span>INSERT TAB TITLE 1 HERE </span></a></li>
        <li><a href="#sub2"><span>INSERT TAB TITLE 2 HERE </span></a></li>
        <li><a href="#sub3"><span>INSERT TAB TITLE 3 HERE</span></a></li>
    </ul>
    Your story content
</div>

Now add your story in three separate <div> elements, each with an id to match the “#sub…” references in the titles, like this:

<div id="story_tabs">
     <ul>
        <li><a href="#sub1"><span>INSERT TAB TITLE 1 HERE </span></a></li>
        <li><a href="#sub2"><span>INSERT TAB TITLE 2 HERE </span></a></li>
        <li><a href="#sub3"><span>INSERT TAB TITLE 3 HERE</span></a></li>
    </ul>
    <div id="sub1" style="padding: 1em;">
        INSERT STORY PART 1
   </div>
    <div id="sub2" style="padding: 1em;">
        INSERT STORY PART 2
   </div>
    <div id="sub3" style="padding: 1em;">
        INSERT STORY PART 3
   </div>
</div>

The last step is to activate the javascript libraries necessary to make the whole thing work, and to have the formatting as other tabs on your site. At the very end of the page add these three lines of javascript:

<script type="text/javascript" language="javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery-ui-1.10.3.js">
</script> <script>jQuery("#story_tabs").tabs();</script>

There is one problem to remember for the future. You will see that the final piece code refers to “1.10.2.js” and “1.10.3.js”. webtrees has added version-specific titles to javascript libraries. This is a good thing, as it allows the library to be cached, yet be automatically reset when a new version is added. But for us it means we will have to remember to go back to these story pages and amend those numbers at each upgrade. Can’t be helped I’m afraid. It’s for the greater good  😕