is it possible to create this type of dhtml tabbed block?

It's a bit more complicated than I thought it would be. Those tabs need to be structured in a very strict way. I played with the one from stilbuero.

Structure we need:

<div id="container">
  <ul>
    <li><a href="#section-1">Section 1</a></li>
    <li><a href="#section-2">Section 2</a></li>
    <li><a href="#section-3">Section 3</a></li>
  </ul>
  <div id="section-1">
    …
  </div>
  <div id="section-2">
    …
  </div>
  <div id="section-3">
    …
  </div>
</div>

But the blocks being output from drupal would be closer to this times the number of blocks:

<div id="block..1">
  <h2>title</h2>
  <div class="content">
    ...
  </div>
</div>

<div id="block..2">
  <h2>title</h2>
  <div class="content">
    ...
  </div>
</div>

etc..

The titles are grouped with the content so it just won't work. The titles have to be grouped into <li> one after the other. But jQuery does have the ability to modify DOM elements so it can be restructured. Here's what I came up with. I hope I can make this clear since it's a bit convoluted.

First you have to dedicate a block region to this tabbing behavior. Lets say we it's called tab_block_group. This can be modified inside the template.php file. Then inside your page.tpl.php file you would have something like this placed wherever it makes sense.

<?php
if ($tab_block_group) { ?>
<div id="tab-block-container">
  <?php print $tab_block_group; ?>
</div>
<?php
} ?>

The div#tab-block-container created here will contain the tabs and $tab_block_group will print out the blocks for this region.

Download jQuery.js and the jQuery.tabs.js files and include them in the head of the page.tpl.php template. We'll do the same with the style sheets -included with the tab script. All the files has to be in your theme folder.

/drupal-install/themes/your-theme/..

There is a conflict with autocomplete.js and jQuery so you can disable it whenever autocomplete.js is loaded. It's a cheap workaround but if you don't want this restriction then look here.

http://drupal.org/node/88979

Right above the </head> -closing tag inside page.tpl.php, paste this in.

// check for autocomplete.js
<?php if (!preg_match("/autocomplete.js/",$head)) { ?>

// load style sheets.
<link rel="stylesheet" href="<?php echo url($directory.'/tabs.css') ?>" type="text/css" media="print, projection, screen" />
<!--[if lte IE 7]>
<link rel="stylesheet" href="<?php echo url($directory.'/tabs-ie.css') ?>" type="text/css" media="projection, screen" />
<![endif]-->

// load javascript.
<script type="text/javascript" src="<?php echo url($directory.'/jQuery.js') ?>"></script>
<script type="text/javascript" src="<?php echo url($directory.'/jQuery.tabs.js') ?>"></script>

<script type="text/javascript">

  // only when ready!
  $(document).ready(function(){

    // inserts "ul.title-group" into the container.
    $("#tab-block-container").prepend("<ul class=\"title-group\"></ul>");

    // moves "a.tab-link" which are block titles into "ul.title-group".
    // the title must be modified conditionally inside block.tpl.php
    $("#tab-block-container ul.title-group").prepend($("#tab-block-container a.tab-link"));

    // wraps "li.title" around "a.tab-link".
    $("#tab-block-container ul.title-group a.tab-link").wrap("<li class=\"title\"></li>");

    // trigger jQuery.tab.js by telling it what to work on then set optional effects.
    // by the time the browser executes this next line, the proper structure is in place.
    $("#tab-block-container").tabs({fxFade: true, fxSpeed: 250});

  });

</script>

<?php
}?>

Now open your block.tpl.php file. I don't know how yours is structured so I'll just post a simplified version of mine:

<?php

// set block id to be reused later.
$block_id = 'block-'.$block->module.'-'.$block->delta;

// important!! The block region has to be our designated one.
if ($block->region == tab_block_group) {
  // links are needed to activate the tabs. Link to the block id.
  // a class is set here to manipulate it with jQuery.
  $subject = '<a href="#'.$block_id.'" class="tab-link">'.$block->subject.'</a>';

} else {
  // For all other regions, a standard subject.
  $subject = '<h2 class="title">'.$block->subject.'</h2>';

} ?>

// set our id's & classes. This becomes our target.
<div <?php {
  echo 'id="'.$block_id.'"';
  echo ' class="block block-',$block->module,'"';
} ?>>

  <?php echo $subject ?>

  <div class="content">
    <?php echo $block->content ?>
  </div>
  
</div>

The block gives it's normal output when it is not part of the tab region. The title is turned into a link so it can activate the tabs. It's going to look ugly so it's up to you to style it to fit your theme.

Go in and setup your blocks from your admin pages. You can order them there and fill as many as you want. Each will have its' own tab.

I tried it on my site that's in the middle of being redesigned. -will break horribly in IE Scroll all the way to the bottom.

http://beta.dvessel.com

jQuery is sick! There's so much more that can be done.

–joon

It would be nice if it could start off with a screenshot or at least a diagram of what it's trying to achieve - that's not very clear from context.

.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/