How to create jQuery Tabs out of Markdown

Question

Hi,

I'm currently running a PHP based Content-Management-System that generates its HTML content with the help of Markdown Extra. Most of the content is structured by headings and sub-headings which results in a very long page. At the beginning of each page I create a table of contents with the help of a list and Markdown Extra's Header Id Attribute.

In oder to shorten the length of a page view I'd like to use the jQuery's Tabs Plugin on the first level of headings.

The Problem is that the output of Markdown Extra is not compatible with what the jQuery Tabs Plugin is expecting because Markdown Extra is not wrapping the content of a section into a separate div-tag.

Is there a way how to make those two libraries work together?

EDIT

This is what the HTML output is looking like:

 <p>Some intro text...</p>
 <h3>Table of content</h3>
 <ul>
  <li><a href="#sub1">Topic 1</a></li>
  <li><a href="#sub2">Topic 2</a></li>
  <li><a href="#sub3">Topic 3</a></li>
 </ul>
 <h3 id="sub1">Topic 1</h3>
 <p>The content of this topic.</p>
 <h3 id="sub2">Topic 2</h3>
 <p>The content of this topic.</p>
 <h3 id="sub3">Topic 3</h3>
 <p>The content of this topic.</p>

.. and this is the corresponding Markdown code:

Some intro text...

###Table of content###

* [Topic 1](#sub1)
* [Topic 2](#sub2)
* [Topic 3](#sub3)

###Topic 1### {#sub1}

The content of this topic.

###Topic 2### {#sub2}

The content of this topic.

###Topic 3### {#sub3}

The content of this topic.

Solution

With a little help of cobbal I made this jQuery statement that will transform the Markdown markup into something that the Tabs plugin will work with:

  $("#tabs :header").each(function() 
  {
    var id = $(this).attr("id");
    if(id=="") return;    
    var div = $("<div>");
    var tagName = this.tagName;    
    $(this).nextAll().each(function()
    {
      if(this.tagName==tagName) return false;
      div.append(this);
    });
    $(this).removeAttr("id");
    div.attr("id", id);
    $(this).before(div);
    div.prepend(this);
  });

But the fact that I need to transform the markup to fit the Tabs plugin rather than just tell the Tabs plugin that it should select its content in a different way may made this solution not the ideal one.

Answer 1

It looks to me like you could wrap the table of contents in a div yourself.

Half way down the Markdown Extra page that you linked to it shows how to insert Markdown inside a div, like this:

PHP Markdown Extra gives you a way to put Markdown-formatted text inside any block-level tag. You do this by adding a markdown attribute to the tag with the value 1 — which gives markdown="1" — like this:

<div markdown="1">
This is *true* markdown text.
</div>

The markdown="1" attribute will be stripped and the ’s content will be converted from Markdown to HTML. The end result will look like this:

<div>

<p>This is <em>true</em> markdown text.</p>

</div>

Answer 2

on your document.ready

$("#sub1,#sub2,#sub3").each(function() {
    var containerDiv = $("<div>").attr("id", $(this).attr("id") + "div");
    $(this).before(containerDiv);
    containerDiv.append(this);
});

and change your markdown to

...
* [Topic 1](#sub1div)
* [Topic 2](#sub2div)
* [Topic 3](#sub3div)
...