Accordion mootools example

Nested Custom blocks demonstrated on example Accordion:

It will have the ability to run multiple CPs within a tab.

• Since version 1.4.4 r381
• Mootools V1.2.x

better translate

Have a look too: Using Accordion tabs (MooTools V1.2x) in the CP Register/Tabs. Accordion tabs (MooTools v1.2x)

Frontend output:

We use the possibility of custom nested blocks, short “CuBl”. This can not happen directly, so we can not CuBl write directly in the template into another CuBl. Therefore, we use an HTML-CP for the job (See below).

Order of events:

The CuBl {ACCORDION} is the master block, which takes up the entire contents of Accordions and delivers.
The HTML CPs forms the TAB headlines and takes up in their content the placeholders of the secondary custom blocks {ACCO-01}, ACCO-02 …}.
These secondary blocks form the output device for the CPs those appear in the individual TABs. (This is the nesting).

Method:

• Page layout: Installation of the custom blocks
• Template: Filling the custom blocks
• Template: Insertion of the Master Custom block in main:
• Article: Creation of the HTML CPs those form the TAB headlines and employ the place holders {AACO-01} {ACCO-02} ….
• CP template HTML: Use Heading and content box according to the Accordion requirements
• Article CPs: Create the CPs with display: in “ACCO-01” or “ACCO-02” or …..

Page layout:

Creating the blocks: ACCORDION, ACCO-01, ACCO-02, ACCO-03, ACCO-04, ACCO-05, ACCO-06 (The names may also be different, please replace analog in all sectors).

Templates:

After the blocks were created in page layout, these are available in all templates.
Custom blocks have the peculiarity that when these blocks are addressed by any of the CP the enclosing content of blocks will not be delivered.

E.g. the block {ACCORDION} with his statement as [PHP PHP ]…[/] or the <div> container is only processed, if this block of a CP of the current side is requested. In this case in main: the placeholder {ACCORDION} is not considered during rendering process, it is deleted.

Some people might ask yourself, why in the block {ACCORDION} again {ACCORDION} must be located: At this point, the contents of the calling CPs are used

{ACCORDION} is placed at the point in “main:” where you want to place the issue of Accordions. (In general, close {CONTENT}).

Template: template/inc_cntpart/html/custom_block_accordion.tmpl

[TITLE]<h3 class="toggler" title="{TITLE}">{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
<div class="element">
[HTML]{HTML}[/HTML]
</div>

Now Text W/Image:

File: template/inc_css/specific/mootools/cust_block_accordion01.css

.cb_content {
    font-size:1em;
    line-height:135%;
    margin:10px 35px 0pt 20px;
    padding: 10px 10px 10px 10px;
    position:relative;
    z-index:5;
    width: 600px;
    border: 1px solid #888;
    background-color: #FAFFEF;
}
 
.cb_content #accordion {
    margin:20px 0px;
}
 
.cb_content h3.toggler {
    cursor: pointer;
    border: 1px solid #f5f5f5;
    border-right-color: #ddd;
    border-bottom-color: #ddd;
    font-family: 'Andale Mono', sans-serif;
    font-size: 12px;
    background: #D2E0E6;
/*    background: #C3DFCC; */
    color: #528CE0;
    margin: 0 0 4px 0;
    padding: 3px 5px 1px;
}
 
.cb_content h3.accordion-selected {
    cursor: pointer;
    border: 1px solid #f5f5f5;
    border-right-color: #ddd;
    border-bottom-color: #ddd;
    background: #A7CFDF;
    color: #355A8F;
}
 
.cb_content h3.toggler:hover {
    cursor: pointer;
    border: 1px solid #f5f5f5;
    border-right-color: #ddd;
    border-bottom-color: #ddd;
    background: #A8C5CF;
    color: #2F507F;
}
 
.cb_content .element p, .cb_content .element h4 {
    margin:0px;
    padding:4px;
}
 
.cb_content blockquote {
    padding:5px 20px;
}

File: template/lib/mootools/plugin-1.2/mootools.AccordionTabs01.js

/* MooTools V1.2 */
window.addEvent('domready', function() {
 
    //create our Accordion instance
    var myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', {
        opacity: false,
        onActive: function(toggler, element){
            toggler.addClass('accordion-selected');
        },
        onBackground: function(toggler, element){
            toggler.removeClass('accordion-selected');
        }
    });
});

E.g. to be able to close the active block by clicking on himself again:

opacity: false, alwaysHide: true, show: -1,

Options: Class: Fx.Accordion

Instead of the Custom block {ACCORDION} in the template, we use a further HTML-CP within this article. In its text field {ACCORDION} is registered. The output target is {CONTENT}.

The benefit is that the content is now written in {CONTENT} and the separate tag {ACCORDION} in 'main: is not needed..

Content of the template for this cp: template/inc_cntpart/html/accordion01.tmpl

[HTML]
[PHP]
// ---- Init Moore function  v2
$js[1] = 'MORE:Fx/Fx.Elements,Fx/Fx.Accordion';
renderHeadJS($js);
 
// ---- Loading the right CSS-file.
$GLOBALS['block']['css']['cust_block_accordion01'] = 'specific/mootools/cust_block_accordion01.css';
 
// ---- Loading the JS Plugin
initJSPlugin('AccordionTabs01');
[/PHP]
<!-- ====== ACCORDION ====== //-->
<div class="cb_content">
<div id="accordion">
{HTML}
</div>
</div>
[/HTML]

All content of the custom block {ACCORDION} is now emptied not deleted) but the tag {ACCORDION}.

<note> In “main:” the placeholder {ACCORDION} will be removed.
</note>

A third variant would be the use of the CP (Register) tabs instead of HTML CPs.