I'm looking for something that functions like this (purple section) that is fairly easy to edit. I'm not even sure what to call it to Google for it! Anyone have an idea?

Look for tab controls. You'll probably use jquery.

http://jqueryui.com/demos/tabs/

You don't have to use jquery
http://www.modtalk.co.uk/article/c-a...gn/dhtml-tabs/

demo page
http://www.modtalk.co.uk/_site/code/...ipt/show-hide/

Yeah, yeah! That's perfect!

Soooo...
It doesn't work...
http://ts4.triplemoonsdesign.com/order.html

I figured it out. The code they have you copy/paste is incorrect. The correct version can be pulled from the source code of their demo.

Correct, that's why I wrote the "Switch to code view" bit.

The backend renders HTML delimiters as < & >

Maybe I should add an instruction/warning to the overview window

I would for dumb people like me!

Or I could write a handler/listener for a click event in the overview and switch to code view with have the text selected already .


The "clearing" problem is because the entire tab container is positioned absolute.

The container needs to be relative with the child tab pages as absolute so they can overlay each other.

I love your flippy code, Chris...But could you explain to me how to display it more then once on a page? Also is it possible to pull that Javascript out of the actual site and use an external file?

http://windygator.com/

You can put the javascript external with no problem at all.

To add another set of tabs is simply enough as well.

All it needs is for the tab button to have an ID of "t_idToShow" and the same JS will handle any amount of "boxes".

Hmm. I did do the t_# id, but they don't seem to be working properly.

<div id="tabbox">
    <div id="tabbar">
        <div class="tab" id="t_one" onclick="show(this.id)">
        
            Topics
        
        </div>
        <div class="tab" id="t_two" onclick="show(this.id)">
        
            Archives
            
        </div>
    </div>
    <div class="cbox" id="two">
        
        <ul>                
            <?php wp_get_archives('type=monthly&show_post_count=1'); ?>
        </ul>
    
    </div>
    <div class="cbox" id="one">
                
        <ul>
            <?php wp_list_categories('orderby=name&show_count=1&title_li='); ?>
        </ul>

    </div>

</div>

<br /><br />

<div id="tabbox">
    <div id="tabbar">
        <div class="tab" id="t_three" onclick="show(this.id)">
        
            Posts
        
        </div>
        <div class="tab" id="t_four" onclick="show(this.id)">
        
            Comments
            
        </div>
    </div>
    <div class="cbox" id="three">
                
        
    
    </div>
    <div class="cbox" id="four">
                
        <ul>
            <?php wp_list_comments(); ?>
        </ul>

    </div>

</div>

what does it do or not do, as the case maybe

The second box, which a tab is clicked on, jumps up to where the first box is and replaces part of it. You have to see it, I don't know how to describe it. http://windygator.com/

That's the "HideAll()" function collapsing all the boxes with the same class name.

To use two separate sets, you need to differentiate between each group when hiding the boxes.
The classname can be passed through in the show function and on through to the "HideAll()" function to replace the hardcoded variable.

How about you explain that as if I don't have the faintest idea how Javascript works (because I don't).

in the tab button

<div class="tab" id="t_tabz" onclick="show(this.id,'classZ')">Z</div>
........

On the boxes

<div class="classZ" id="tabZ">This is box for tab Z</div>
.......

And th JS

<script type="text/javascript">
function show(p_oID,class) {
var objID = p_oID.replace("t_","");
	hideAll(class);
	document.getElementById(objID).style.visibility = "visible";
	document.getElementById(objID).style.display = "block";
}

function hideAll(class) {
	var cBoxes = getElementsByClassName(class);
	for (var i=0;i < cBoxes.length; i++) {
		cBoxes<i>.style.visibility = "hidden";
		cBoxes<i>.style.display = "none";
	}
}
function getElementsByClassName(class) {
    var a = ;
    var re = new RegExp("\b" + class+ "\b");
    var els = document.getElementsByTagName("div");
    for(var i=0;i < els.length; i++)
        if(re.test(els<i>.className))a.push(els<i>);
    return a;
}

Does this mean each section has to have their own Javascript?

I'm looking at this and I just don't understand.

Originally Posted by TripleMoons

Does this mean each section has to have their own Javascript?

The same javascript runs it all.

I shall create an example of two independant tabs -





Watch this space