phpwcms Support Forum

Code: Select all

window.addEvent('domready', function() {
	
	//create our Accordion instance
	var myAccordion = new Accordion($('accordion'), 'ul.tab-navigation', 'div.tab-content', {
		opacity: false,
		fixedHeight: 220,
		alwaysHide:true,
		display:-1,
		onActive: function(toggler, element){
			toggler.setStyle('color', '#41464D');
		},
		onActive: function(toggler, element){
			element.setStyle('overflow-y', 'scroll');
		},
		onBackground: function(toggler, element){
			toggler.setStyle('color', '#528CE0');
		}
	});
});

Code: Select all

/* CP Tabs Mootools Accordion ----------------------------------------- */

.tab-content {
	background-color:#ccccee; 
	position:relative; 
	height:220px; 
	width:450px; 
	padding:5px 5px 5px 10px;
	margin-bottom:1px; 
	border: 1px solid #9596ef;
	margin-top: -1px;
	z-index: 10;
}
.tab-content {
	overflow-y:scroll; 
/*	overfolw-y:auto; */
	
}
.tab-content img { 
	border:none; 
}

.tab-navigation { 
	cursor: pointer;
	margin-left:0;
	margin-bottom:0;
	padding: 0 0 1px 0;
	z-index: 20;
	position:relative;
	margin: 0;
}
.tab-navigation li {
/*	background-color:transparent; */
	display:inline;
	float:none;
	list-style:none; 
}
.tab-navigation li a {
	background-color:#9596ef; 
	color:#fff; 
	font-weight: bold;
	display: block; 
	height:auto;
	padding:5px 5px 5px 10px;
	text-decoration:none;
	width: 450px; 
	border: 1px solid transparent;
	border-bottom: none;
	z-index: 20;
}

Code: Select all

<?php
/**
********************************************************************
* KH 13.12.2010: For CP Reg Tabs since r409
* KH: 03.05.2011: MooTools Accordion
* http://forum.phpwcms.org/viewtopic.php?f=28&t=21049&p=129856#p129856
********************************************************************/

// ------------------------------------------------------------------
// obligate check for phpwcms constants
if (!defined('PHPWCMS_ROOT')) { die("You Cannot Access This Script Directly, Have a Nice Day."); }
// ------------------------------------------------------------------



// Is the switch "tabs: " in a CP active?
if(strpos($content["all"],'id="TABBOX') !== false AND strpos($content["all"],'[%MOO-ACCORDION%]') !== false) {

	// Kill the identifyer TAG [%MOO-ACCORDION%]
	$content["all"] = str_replace('[%MOO-ACCORDION%]','',$content["all"]);
	
    // Load the CSS file
    $block['css']['mootools-accordion'] = 'specific/mootools/accordion.css';
   
       // Load the required "plugins"
// ---- Init Moore function  v2
    $mootools_more = array('Fx/Fx.Elements','Fx/Fx.Accordion');
    initJSPlugin($mootools_more, true);
    initJSPlugin('moo-accordion');

    // Kill the anchor text in link)
    $content["all"] = preg_replace('/href="#tab-(.*?)"\>/s','href="#">', $content["all"]);

}
?>

Code: Select all

{ACCORDION}
<!-- CSS: {TEMPLATE}inc_css/specific/jquery/jquery-cptab-accordion.css -->
<!-- JS: {TEMPLATE}lib/jquery/plugin/jquery.cptab.accordion.js -->

Code: Select all

<!--TABS_START//-->
[TITLE]<h1>{TITLE}</h1>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
[TABS_ENTRIES]
<div class="accordion">{TABS_ENTRIES}</div>
<!-- CSS: {TEMPLATE}inc_css/jquery_accordion.css --><!-- JS: accordion -->
[/TABS_ENTRIES]
<!--TABS_END//-->

<!--TABS_ENTRY_START//-->
[TABCONTENT]
   <h2 class="acc_trigger"><a href="#">{TABTITLE}</a></h2>
  <div class="acc_container">
  <div class="block">
      [TABHEADLINE]<h4>{TABHEADLINE}</h4>[/TABHEADLINE]
      [TABTEXT]{TABTEXT}[/TABTEXT]
   </div>
   </div>
[/TABCONTENT]
<div style="clear: left;"></div>
<!--TABS_ENTRY_END//-->

Code: Select all

jQuery(document).ready(function(){
	
	//Set default open/close settings
	var acc_trigger = $('.acc_trigger');
	
	if(acc_trigger) {

		$('.acc_container').hide(); //Hide/close all containers
		$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container
	
		//On Click
		acc_trigger.click(function(){
			if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
				acc_trigger.removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
				$(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
			} else {
				acc_trigger.removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
			}
			return false; //Prevent the browser jump to the link anchor
		});
	
	}

});

Code: Select all

.accordion {
	margin: 1em 0;
}

h2.acc_trigger {
	margin-top: .5em;
	font-weight: bold;
}

h2.acc_trigger a,
h2.acc_trigger span {
	text-decoration: none;
	display: block;
}

h2.active a,
h2.active span,
h2.acc_trigger a:hover,
h2.acc_trigger span:hover {
	cursor: pointer;
}

.acc_container {
	margin: .5em 0 1em 0;
	padding: 0 1em .5em 1em;
	overflow: hidden;
	border-bottom: 1px dotted #ddd;
}

.acc_container .block p {

}