[TUT] How to make collapsible modules in your template

Everything to do with Joomla! 1.5 templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Locked
ah72
Joomla! Explorer
Joomla! Explorer
Posts: 290
Joined: Sat Mar 15, 2008 9:43 pm
Contact:

[TUT] How to make collapsible modules in your template

Post by ah72 » Fri Jul 04, 2008 9:26 am

Hello all,

Here's a module chrome that adds sliding containers for your modules:

save this code in "/templates/your_template/html/modules.php"

Code: Select all

<?php
/*
 * Module chrome that adds slides for modules
 * based on xhtml chrome (if your module is styled with xhtml chrome selected, you won't lose css when you change to this chrome )
 *
 * Usage: <jdoc:include type="modules" name="module_position" style="slide" slideOptions="{put options here to override defaults for all modules in this position}" slideOptions_mod{module_id}="{put here options to be applied only to module with id 'module_id'}"/>
 *
 * Example: <jdoc:include type="modules" name="left" style="slide" slideOptions="{transition:Fx.Transitions.Bounce.easeOut, opacity:true}" slideOptions_mod1="{show:0, , opacity:false}"/>
 * The above example will add slides for modules in the left position, with transition set to 'Bounce.easeOut' and with opacity effect for modules other than module having id '1'
 *
 * Slide shown/hidden status will be kept after page refresh. To override this, use option 'show:-1' (to hide) or 'show:0' (to show) in  slideOptions or slideOptions_mod{module_id}
 *
 * If slideOptions or slideOptions_mod{module_id} are not specified as in this example:
 * <jdoc:include type="modules" name="right" style="slide"/>
 * default options will be applied, check code below to see default options. check mootools Accordion documentation to get a full list of available options
 * 
 * v1.0 - by ah72, July 2008
 * 
 */

// no direct access
defined('_JEXEC') or die('Restricted access');

function modChrome_slide($module, &$params, &$attribs){

    if (!empty ($module->content)) : ?>
        <div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>" id="module_<?php echo $module->id; ?>">
            <h3 class="slide_toggler" style="cursor:pointer;"><?php echo $module->title; ?></h3>
            <div class="slide_content">
                <?php echo $module->content; ?>
            </div>
        </div>
    <?php endif;

    $defaultSlideOptions = "{
        alwaysHide: true,
        show: (Cookie.get('slide_mod".$module->id."')=='hide')? -1 : 0,
        opacity: false,
        duration: 1*Math.min(1.5*( \$E('#module_".$module->id." div.slide_content').offsetHeight ? \$E('#module_".$module->id." div.slide_content').offsetHeight : 150 ), 300),
        transition: Fx.Transitions.Quad.easeOut,

        onComplete: function(element){
            if ( \$E('#module_".$module->id." div.slide_content').getStyle('height') != '0px' ) {
                \$E('#module_".$module->id." div.slide_content').setStyle('height', 'auto');
                Cookie.set('slide_mod".$module->id."', 'show', {duration: 365});
            } else {
                Cookie.set('slide_mod".$module->id."', 'hide', {duration: 365});
            }
        },
        
        onBackground: function(toggler, element){
            element.setStyle('height', element.offsetHeight+'px');
        }
        
    }";
    
    
    if (isset( $attribs['slideOptions'] )) {
        $slideOptions = $attribs['slideOptions'];
    } else {
        $slideOptions = "{}";
    }
    
    if (isset( $attribs['slideOptions_mod'.$module->id] )) {
        $slideOptions .= ', '.$attribs['slideOptions_mod'.$module->id];
    }
    
    JHTML::_('behavior.mootools');
    $js = 'window.addEvent(\'domready\', function(){ new Accordion($ES(\'#module_'.$module->id.' h3.slide_toggler\'), $ES(\'#module_'.$module->id.' div.slide_content\'), $merge('.$defaultSlideOptions.', '.$slideOptions.')); });';
    $document =& JFactory::getDocument();
    $document->addScriptDeclaration( $js );

}
?>

refer to comments in the previous code for usage instructions

This slide effect is based on mootools Accordion

Features:
  • Slide options configurable globally for all modules in a position and individually for each module
  • Slide shown/hidden status will be kept after page refreshes
Regards
web2host.co.cc - Quality Free Hosting without ads - Joomla! auto-installation!!

herb200mph
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3211
Joined: Sun Jun 25, 2006 12:12 am
Location: Salisbury, NC/USA (N. of Charlotte)
Contact:

Re: [TUT] How to make collapsible modules in your template

Post by herb200mph » Sat Jul 05, 2008 8:26 pm

ah72: got a site to look at with the sliding modules function? I'd like to see a practical application if possible.
http://www.200mphMedia.net
Author: Joomla! 3: Boot Camp book @ Amazon.com

User avatar
pedro1966
Joomla! Apprentice
Joomla! Apprentice
Posts: 36
Joined: Wed Sep 17, 2008 8:29 am
Location: Germany
Contact:

Re: [TUT] How to make collapsible modules in your template

Post by pedro1966 » Wed Sep 17, 2008 8:41 am

Need help, is it possible to use this fine tool in Joomla 1.0.x ?

ghazal
Joomla! Explorer
Joomla! Explorer
Posts: 274
Joined: Fri Aug 19, 2005 12:12 pm
Location: Out of my mind ...sometimes

Re: [TUT] How to make collapsible modules in your template

Post by ghazal » Wed Oct 15, 2008 8:01 am

Hi,
I discovered your very interesting (and working, which is the most important) tuts through the drop-down menu.
They answered some questions for which I had trouble finding solutions.
And i really thank you for that.

Today, I choose to post on this particular thread because it displays a point that has been bothering me a bit :
the fact that you insert/translate js code in/into php syntax.
- the cons for me is that, as I, for example, am not very used to this, but used to "pure" JS scripts, it is very difficult to debug or modify.
The topic has been discussed on mootools forum
http://groups.google.com/group/mootools ... bad16fce6c

Anyway, as long as the code you write is so useful,
keep up the good work

User avatar
bascherz
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 243
Joined: Mon Jan 16, 2006 1:33 am
Location: Vienna, VA
Contact:

Re: [TUT] How to make collapsible modules in your template

Post by bascherz » Sat Jan 03, 2009 2:54 pm

This is pure genius and extremely handy. Thanks!
Bruce Scherzinger

bravo6me
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Fri Jan 02, 2009 4:20 pm

Re: [TUT] How to make collapsible modules in your template

Post by bravo6me » Sun Jan 04, 2009 4:34 am

hi,
I install module in Joomla 1.5.8
Template Plaza Celebed Plaza,
TP News Ticker mod_tpnewsticker success fully,
and it can Enable in Module Manager,

but i never find in admin (effect type can be chosen from the backend)
how/where to enter the news headlins on this module,

please help me, i am new in joomala
please e-mail me bravo6me@hotmail.com

best regards
bravo

designedfree4u
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Thu Dec 11, 2008 1:44 am

Re: [TUT] How to make collapsible modules in your template

Post by designedfree4u » Wed Jan 28, 2009 10:09 pm

I have it going in the top module location, but when i click the module link the header div dosen't extend with sliding module. Is there a fix for that?

thanks,
J/M

User avatar
bascherz
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 243
Joined: Mon Jan 16, 2006 1:33 am
Location: Vienna, VA
Contact:

Re: [TUT] How to make collapsible modules in your template

Post by bascherz » Thu Jan 29, 2009 12:52 am

It's probably because your header style has a height specified. Left and right module positions typically don't. But that's just a guess.
Bruce Scherzinger

simcfc73
Joomla! Apprentice
Joomla! Apprentice
Posts: 11
Joined: Mon Mar 12, 2007 3:31 pm

Re: [TUT] How to make collapsible modules in your template

Post by simcfc73 » Mon Jun 15, 2009 10:09 pm

Really like this by the way.

Struggling to work out how to get individual modules to accept different styles.. what i want is for some of them to be open by default.

This is what I have now

<td width="157px" valign="top" class="side2"> <jdoc:include type="modules" name="right" style="slide" slideOptions="{transition:Fx.Transitions.Bounce.easeOut, opacity:true, show:-1}" /></td>

I would like module 18 to use the show 1 so its open... where so I put it?

Tried a few different ways but can't work it out.

Any help would be great.

bplumb
Joomla! Intern
Joomla! Intern
Posts: 60
Joined: Sat Jul 11, 2009 2:35 pm

Re: [TUT] How to make collapsible modules in your template

Post by bplumb » Wed Aug 04, 2010 4:34 pm

Hi all,

Sorry, this is probably a real n00b question, but where do I put the

<jdoc:include type="modules" name="left" style="slide" slideOptions="{transition:Fx.Transitions.Bounce.easeOut, opacity:true}" slideOptions_mod1="{show:0, , opacity:false}"/>

line? I'm guessing not in the module.php file?

Many thanks,

bplumb

User avatar
bascherz
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 243
Joined: Mon Jan 16, 2006 1:33 am
Location: Vienna, VA
Contact:

Re: [TUT] How to make collapsible modules in your template

Post by bascherz » Wed Aug 04, 2010 5:25 pm

It goes in the template file where you want the module to appear (aka module position).
Bruce Scherzinger

bplumb
Joomla! Intern
Joomla! Intern
Posts: 60
Joined: Sat Jul 11, 2009 2:35 pm

Re: [TUT] How to make collapsible modules in your template

Post by bplumb » Thu Aug 05, 2010 11:09 pm

Sorry, bascherz, is this in the template.css file then or the index.php file? Apologies for not really having much of a clue here, this is exactly the kind of thing I am looking for for our website but am really struggling to get it to work. I thought that adding it to the index.php file under the <div? section of that module would work instead of the existing <jdoc:include... would work, but unfortunataly this is not the case!

Any help greatly appreciated!

User avatar
bascherz
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 243
Joined: Mon Jan 16, 2006 1:33 am
Location: Vienna, VA
Contact:

Re: [TUT] How to make collapsible modules in your template

Post by bascherz » Thu Aug 05, 2010 11:25 pm

Well, the original post tells you where to save the PHP file and the comments in that code tell how to format the jdoc reference that goes in your template index.php file. Not sure I can say it any better.
Bruce Scherzinger

bplumb
Joomla! Intern
Joomla! Intern
Posts: 60
Joined: Sat Jul 11, 2009 2:35 pm

Re: [TUT] How to make collapsible modules in your template

Post by bplumb » Fri Aug 06, 2010 10:48 am

Hmm...buggered then! That is what I tried. I have added the main code underneath my existing modules.php code, then added the <jdoc:include... line to the index.php file yet it seems to do nothing.

If I wipe away all of the code in the modules.php file and only have the above code, then my modules have no titles, no background etc as the existing code pulls the styling of these. Bruce, could I possibly send you the code I have to see if you can spot anything obvious? And does anyone have a live website where I can see this working?

Many thanks,

bplumb

bplumb
Joomla! Intern
Joomla! Intern
Posts: 60
Joined: Sat Jul 11, 2009 2:35 pm

Re: [TUT] How to make collapsible modules in your template

Post by bplumb » Mon Aug 09, 2010 11:09 pm

Wahay! Sorted it. There was a ?> missing in my code! Grrr!

Can anyone help with styling this? ie, my normal module 'headings' are styled...is there a way that I can point the 'slide' module style to my original module style css?

Many thanks!

bplumb

bplumb
Joomla! Intern
Joomla! Intern
Posts: 60
Joined: Sat Jul 11, 2009 2:35 pm

Re: [TUT] How to make collapsible modules in your template

Post by bplumb » Sat Aug 21, 2010 12:37 pm

If you have several modules in one position, is it possible to make module 1 & 2 slilde, module 3 'none'?

User avatar
bascherz
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 243
Joined: Mon Jan 16, 2006 1:33 am
Location: Vienna, VA
Contact:

Re: [TUT] How to make collapsible modules in your template

Post by bascherz » Sun Aug 22, 2010 2:01 pm

@bplumb: no, but you can certainly put two positions in the same location. I've put up to 4 in the same location that alternated having and not having the attribute.
Bruce Scherzinger

bplumb
Joomla! Intern
Joomla! Intern
Posts: 60
Joined: Sat Jul 11, 2009 2:35 pm

Re: [TUT] How to make collapsible modules in your template

Post by bplumb » Sun Aug 22, 2010 11:38 pm

Thanks bascherz, that was my thinking. Back to the template then! :)

User avatar
janie70
Joomla! Intern
Joomla! Intern
Posts: 59
Joined: Thu Sep 25, 2008 2:55 am
Location: NW Indiana
Contact:

Re: [TUT] How to make collapsible modules in your template

Post by janie70 » Tue Sep 07, 2010 10:35 pm

thanks for the post...it helped me tremendously.
http://www.computerbackpackandbag.com - Computer Backpack, Comfortably At Your Side.

polsart
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Sun Jul 11, 2010 2:14 am

Re: [TUT] How to make collapsible modules in your template

Post by polsart » Sun Nov 14, 2010 3:55 pm

Hi, firstly le tme thank you for this amazing module chrome, i am having one small problem i am trying to resolve and hoping someone has a solution.

Problem, INTERNET EXPLORER when i display a carousell inside this module position the image inside the article stays visible when the module is closed. All text from the module inside the slide module fades away nicely,

FIREFOX works a charm.

Any help or advice would be amazing

thanks

vampire666
Joomla! Intern
Joomla! Intern
Posts: 90
Joined: Tue Mar 25, 2008 5:02 pm

Re: [TUT] How to make collapsible modules in your template

Post by vampire666 » Sat Dec 04, 2010 8:37 pm

I wonder if a plugin would be able to do this (that would show a new option in each module to enable/disable the collapse function, or entire module positions).

Anyhow, is there a way to style this?
Like preserve the css of the module and just add a + and - icon at the "left" or "right" of the module title.

Thank you.

User avatar
bascherz
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 243
Joined: Mon Jan 16, 2006 1:33 am
Location: Vienna, VA
Contact:

Re: [TUT] How to make collapsible modules in your template

Post by bascherz » Sat Dec 04, 2010 10:48 pm

It's already there. You can initialize it to collapsed or expanded and click on the module title to toggle.
vampire666 wrote:I wonder if a plugin would be able to do this (that would show a new option in each module to enable/disable the collapse function, or entire module positions).

Anyhow, is there a way to style this?
Like preserve the css of the module and just add a + and - icon at the "left" or "right" of the module title.

Thank you.
Bruce Scherzinger

User avatar
Ghonjez
Joomla! Exemplar
Joomla! Exemplar
Posts: 8770
Joined: Sat Oct 18, 2008 3:02 am
Location: Mars
Contact:

Re: [TUT] How to make collapsible modules in your template

Post by Ghonjez » Wed Dec 08, 2010 7:59 am

Hi...

For create collapsible modules, i found useful extension for do this, might be helps :
c7Collapze Module >>> http://extensions.joomla.org/extensions ... ling/11339

regards :)

certico
Joomla! Explorer
Joomla! Explorer
Posts: 301
Joined: Tue Apr 10, 2012 5:00 pm
Location: London UK
Contact:

Re: [TUT] How to make collapsible modules in your template

Post by certico » Tue Apr 10, 2012 7:30 pm

I have updated ah72's code to work with Joomla 2.5 / Mootools 1.4
Details here: http://forum.joomla.org/viewtopic.php?f=619&t=709725


Locked

Return to “Templates for Joomla! 1.5”