Posts expandibles

Son los índices que aparecen al solicitar el listado de posts [LOG] o [CHK] en el menú superior del blog de BikerTB. Permiten una navegación más ágil, pudiendose además expandir y contraer una o varias de las entradas de dicho índice al hacer click en la marca [+/-]

Sustituir el siguiente código de la plantilla del blog:

<b:includable id='main' var='top'>
  <!-- posts -->
  <div class='blog-posts hfeed'>
    <b:include data='top' name='status-message'/>
    <data:adStart/>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.dateHeader'>
        <h2 class='date-header'><data:post.dateHeader/></h2>
      </b:if>
      <b:include data='post' name='post'/>

Por este otro:

<b:includable id='PeekABooPost' var='post'>
  <div class='post uncustomized-post-template'>
      <table><tr>
        <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <td width='40px'>
            <a expr:onclick='&quot;javascript:toggleIt(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Expand/collapse this post'>[+/-]</a>
        </td>
        </b:if>
        <td>
            <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
       </td>
       </tr></table>
       <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <div class='post-body' expr:id='data:post.id' style='display:none'>
          <p><data:post.body/></p>
        <div style='clear: both;'/> <!-- clear for photos floats -->
        </div>
      <b:else/>
        <div class='post-body' expr:id='data:post.id' style='display:block'>
        <p><data:post.body/></p>
        <div style='clear: both;'/> <!-- clear for photos floats -->
        </div>
      </b:if>
  </div>
</b:includable>
<b:includable id='main' var='top'>
  <!-- posts -->
  <div class='blog-posts hfeed'>
    <b:include data='top' name='status-message'/>
    <data:adStart/>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.dateHeader'>
        <h2 class='date-header'><data:post.dateHeader/></h2>
      </b:if>
      <b:if cond='data:blog.homepageUrl != data:blog.url'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
             <b:include data='post' name='PeekABooPost'/>
  <b:else/>
        <b:include data='post' name='post'/>
        </b:if>
      <b:else/>
      <b:include data='post' name='post'/>
      </b:if>

Y añadir este pequeño JavaScript en la cabecera que hace expandirse y contraerse las entradas:

<script type='text/javascript'>
function toggleIt(id) {
 post = document.getElementById(id);
 if (post.style.display != &#39;none&#39;) {
  post.style.display = &#39;none&#39;;
 } else {
  post.style.display = &#39;&#39;;
 }
}
</script>
</head>

Si las entradas no se contraen/expanden es posible que falte alguna función. En este caso sustituir el JavaScript anterior por este otro:

<script type='text/javascript'>
// <![CDATA[
function toggleIt(id) {
    post = document.getElementById(id);
    if (post.style.display != 'none') {
        post.style.display = 'none';
    } else {
        post.style.display = '';
    }
}

function showFullPost(id) {
    var post = document.getElementById(id);
    var spans = post.getElementsByTagName('span');
    for (var i = 0; i < spans.length; i++) {
        if (spans[i].id == "fullpost")
            spans[i].style.display = 'inline';
        if (spans[i].id == "readmore")
            spans[i].style.display = 'none';
    }
}

var fade = false;
function showFull(id) {
    var post = document.getElementById(id);
    var spans = post.getElementsByTagName('span');
    for (var i = 0; i < spans.length; i++) {
        if (spans[i].id == "fullpost") {
            if (fade) {
                spans[i].style.background = peekaboo_bgcolor;
                Effect.Appear(spans[i]);
            } else spans[i].style.display = 'inline';
        }
        if (spans[i].id == "showlink")
            spans[i].style.display = 'none';
        if (spans[i].id == "hidelink")
            spans[i].style.display = 'inline';
    }
}

function hideFull(id) {
    var post = document.getElementById(id);
    var spans = post.getElementsByTagName('span');
    for (var i = 0; i < spans.length; i++) {
        if (spans[i].id == "fullpost") {
            if (fade) {
                spans[i].style.background = peekaboo_bgcolor;
                Effect.Fade(spans[i]);
            } else spans[i].style.display = 'none';
        }
        if (spans[i].id == "showlink")
            spans[i].style.display = 'inline';
        if (spans[i].id == "hidelink")
            spans[i].style.display = 'none';
    }
    post.scrollIntoView(true);
}

function checkFull(id) {
    var post = document.getElementById(id);
    var spans = post.getElementsByTagName('span');
    var found = 0;
    for (var i = 0; i < spans.length; i++) {
        if (spans[i].id == "fullpost") {
            spans[i].style.display = 'none';
            found = 1;
        }
        if ((spans[i].id == "showlink") && (found == 0))
            spans[i].style.display = 'none';
    }
}

function commentDisplay(json) {
    for (var i = 0; i < numcomments; i++) {
    var entry = json.feed.entry[i];
    var alturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
            alturl = entry.link[k].href;
            break;
        }
    }
    alturl = alturl.replace("#", "#comment-");

    if (entry.content) {
        comment = entry.content.$t;
    } else if (entry.summary) {
        comment = entry.summary.$t;
    }

    var re = /<\S[^>]*>/g;
    comment = comment.replace(re, "");
    document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> commented:<br/>');
    if (comment.length < numchars)
        document.write(comment + '<br/><br/>');
    else
        document.write(comment.substring(0, numchars) + '...<br/><br/>');
    }
}
//]]>
</script>
</head>