.htaccess - DirectoryIndex with rewrite

I was looking for a way to not only set the default landing page for a directory, but also get that page name to show in the browser's URL area (basically with rewrite). Googling and browsing through the Apache manual didn't seem to give an answer, so here's what I did...

RewriteRule ^folder/$ /folder/defaultpage [R]

Seems obvious, but it was an "Aha!" moment for me. The folder path would be relative to root - if someone tries to access the folder, redirect them to the page within the folder. Virtually the same length as DirectoryIndex, but with a twist - enjoy!

A better "tabbed panels" script with jQuery

I've been getting quite a few comments on my post about using Dreamweaver's tabbed panels widget. While it's a decent widget, I've been frustrated with the lack of control and flexibility it gave me. After hearing a lot about the wonders of jQuery, I thought I'll give it a try.

Picking up jQuery took some time. I'm not great with javascript, and being used to the dynamic abilities of server-side languages (such as PHP) made me feel like I'm taking a step backwards. So my reluctance made me integrate some jQuery UI widgets into my applications and leave it at that.

Although jQuery UI was definitely better than Dreamweaver's widgets, I found myself again yearning for more control. With my knowledge of jQuery at that point, I realized that the tabbed panels script I needed could take just a few lines of code... And I wrote one from scratch.

So there it is - a really simple, highly customizable, ultra lightweight (4 lines of javascript!) tabbed panels "widget". I'm putting widget in quotes because it's so short, it barely feels like one. Enjoy!

The HTML
Each tab title has its own div and corresponding div that holds the related content. All of the divs that hold a tab title must share the same class, in my example it's "head". Also, each div has a unique id, whose value must match the id of the corresponding content div with some predetermined prefix, in my case it's 'content'. You can have any value whatsoever, so long as they match. The order of the divs doesn't matter, so if you want this to look more like an accordion rather than tabbed panels just put each content div right after its title, rather than grouping all the titles and content separately.
If you need the id attribute for the CSS, you can use the name attribute to hold a unique value instead.

< 'div' class="head" id="tab_1">Tab 1 Title< /div >
< 'div' class="head" id="tab_2">Tab 2 Title< /div >
< 'div' class="head" id="tab_3">Tab 3 Title< /div >
< 'div' class="content" id="tab_1_content">Tab 1 Content< /div >
< 'div' class="content" id="tab_2_content">Tab 2 Content< /div >
< 'div' class="content" id="tab_3_content">Tab 3 Content< /div >


The CSS
The only thing you need if you don't want all the content to display when it's first loading:

.content { display: none; }

Other than that, you have the freedom to set your own styles - let the creativity roll!

The jQuery
Well I promised 4 lines of code so I can't make this part too complicated either. All you need:

$('.head').click(function() {
var name = '#' + $(this).attr('id') + '_content';
$('div.content').not(name).hide();
$(name).show(); });

So basically, when you click on one of the head divs, get the id of that div (or name if you need the id for styling), show the content div with that id, and hide all the content divs whose id doesn't match that id - or all the other content divs. Didn't I promise simple?

Advanced Stuff
You can customize the jQuery with different effects instead of show and hide, or add delays to make the transitions look more smooth.

To set a default tab to show, add any unique attribute to that content div and use jQuery to show it as soon as the page loads:

$('#default_tab').load(function() {
$(this).show();
});


If you want a different look for the tabs on mouseover:

$('.head').hover(function() {
$(this).addClass('mouseoverclass') },
function() {
$(this).removeClass('mouseoverclass');
});