Question

I would like to create a tab view just by hide and show div element with mootools.I am stucked by using mootools and got confused.

Following list generated dynamically from php and we can’t guess the element id. When we are click on each list item; it should apply the active class for the same and remove active class from current list item.

<div class="lorem_ipsum">
<div class="lorem">
    <ul id="main_tabs">
        <li id="815" class="active" onclick="tabManage()">Lorem Ipsum</li>
            <li id="816" onclick="tabManage()">John</li>
            <li id="817" onclick="tabManage()">Lorem Text</li>
        <li id="818" onclick="tabManage()">Demo Text</li>
    </ul>
</div>

<script language="javascript">
 function tabManage()
 {

$('815').addClass = "active";

$('816').removeClass = "active";

$('817').removeClass = "active";

$('818').removeClass = "active";
}
</script>

How can we apply a loop in the javascript. Please any body can help me to write javascript script function for same.Thanks in advance

Answer 1

here’s your quick tabs in 10 mins in mootools (best viewed in FF due to quick CSS3 styling): http://www.jsfiddle.net/dimitar/THQWn/

(function() {
    // closure - to be run in a domready block.
    var tabs = document.id("main_tabs").getElements("li");
    var output = document.id("output"), divs = output.getChildren();

    tabs.addEvents({
        click: function(e) {
            // clear up all tabs of 'active'
            tabs.removeClass("active");
            // make this active and remove the mouseover effect
            this.addClass("active").removeClass("over");

            // make all content hidden
            divs.addClass("hide");

            // remove hidden class from the div that links to our id.
            output.getElement("div[rel=" + this.get("id") + "]").removeClass("hide");
        },
        mouseenter: function() {
            if (!this.hasClass("active"))
                this.addClass("over"); // not applicable to active
        },
        mouseleave: function() {
            this.removeClass("over");
        }
    });

})();

note that i am doing some slight changes in the markup but it ought to be enough to get you started