Write Tab Content Accordion

See the image below to get an idea of the final result, or take a look at the video below.

First step

Create a new stylesheet and name it as tabber_content_accordion
(Presentation > Style > Create new style)

Then paste and save the next codes in it:

/* Main */
.content_accordion_wrap {
	width:190px;
	margin:16px auto;
}

.content_accordion,  .content_accordion * {
	list-style:none;
	padding:0;
	margin:0;
}

.content_accordion ul {display:none;}

/* Titles */
.content_accordion .title {
	height:20px;
	display:block;
	font-size:14px;
	font-weight:bold;
	text-align:left;
	line-height:20px;
	vertical-align:middle;
	color:#663300;
	background: #ffd83f;
	background: -moz-linear-gradient(top, #ffd83f 0%, #ffd83f 50%, #ffcc33 51%, #ffcc33 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd83f), color-stop(50%,#ffd83f), color-stop(51%,#ffcc33), color-stop(100%,#ffcc33));
	background: -webkit-linear-gradient(top, #ffd83f 0%,#ffd83f 50%,#ffcc33 51%,#ffcc33 100%);
	background: -o-linear-gradient(top, #ffd83f 0%,#ffd83f 50%,#ffcc33 51%,#ffcc33 100%);
	background: -ms-linear-gradient(top, #ffd83f 0%,#ffd83f 50%,#ffcc33 51%,#ffcc33 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd83f', endColorstr='#ffcc33',GradientType=0 );
	background: linear-gradient(top, #ffd83f 0%,#ffd83f 50%,#ffcc33 51%,#ffcc33 100%);
	padding-left:10px;
	margin:1px 1px 6px 1px;
	text-decoration:none;
	border-radius:3px;
	box-shadow:1px 1px 2px #999;
}

.content_accordion .title span {
	color:#777;
	padding-right:5px;
}

.content_accordion .title.l2 {padding-right:20px;}
.content_accordion .title.l3 {padding-right:30px;}

.content_accordion .title:hover {
	background: #ffcc33;
	background: -moz-linear-gradient(top, #ffcc33 0%, #ffcc33 49%, #ffd83f 50%, #ffd83f 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffcc33), color-stop(49%,#ffcc33), color-stop(50%,#ffd83f), color-stop(100%,#ffd83f));
	background: -webkit-linear-gradient(top, #ffcc33 0%,#ffcc33 49%,#ffd83f 50%,#ffd83f 100%);
	background: -o-linear-gradient(top, #ffcc33 0%,#ffcc33 49%,#ffd83f 50%,#ffd83f 100%);
	background: -ms-linear-gradient(top, #ffcc33 0%,#ffcc33 49%,#ffd83f 50%,#ffd83f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc33', endColorstr='#ffd83f',GradientType=0 );
	background: linear-gradient(top, #ffcc33 0%,#ffcc33 49%,#ffd83f 50%,#ffd83f 100%);
	box-shadow:1px 1px 2px #333;
}

.content_accordion .title.active {
	color:#777;
	background: #ffffff;
	background: -moz-linear-gradient(top, #ffffff 0%, #fffcf4 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#fffcf4));
	background: -webkit-linear-gradient(top, #ffffff 0%,#fffcf4 100%);
	background: -o-linear-gradient(top, #ffffff 0%,#fffcf4 100%);
	background: -ms-linear-gradient(top, #ffffff 0%,#fffcf4 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fffcf4',GradientType=0 );
	background: linear-gradient(top, #ffffff 0%,#fffcf4 100%);
	border:1px solid #777;
	box-shadow:0 0 3px #999;
	margin:0 0 5px 0;
}

.content_accordion .title.active span {color:#999;}

/* Items */
.content_accordion .item {
	padding-bottom:5px;
	border-bottom:1px dotted #ccc;
	margin-bottom:5px;
}

.content_accordion .item.last {border-color:#000;}

.content_accordion .item a {
	width:190px;
	height:50px;
	display:block;
	text-decoration:none;
}

.content_accordion .item a:hover {background-color:#f1f1f1;}

.content_accordion .item a img {
	width:50px;
	height:50px;
	display:block;
	float:right;
}

.content_accordion .item a span {
	height:40px;
	display:block;
	overflow:hidden;
	font-size:13px;
	line-height:20px;
	text-align:left;
	padding:5px 0;
}

.content_accordion ul li a:hover img {
	opacity:0.7;
	filter:alpha(opacity=70);
}

/* Custom items */
.content_accordion ul.videos .item a span {
	line-height:14px;
}

Second step

Create a new page template and name it as tabber_content_accordion
(Presentation > Pages > Create new page)

Then paste and save the next code inside of it:

<txp:css format="link" name="tabber_content_accordion" />

<script type="text/javascript">
	$(document).ready(function(){
		$('.content_accordion a.title').click(function(event){
			var items = $(this).next();
			var level = $(this).attr('class').replace(/ title| active/g,'');
			var lower_levels = $('.'+level).parent('li').find('.title');
			var others = $('.'+level).parent('li').find('ul');

			$('.'+level+'.title').not($(items).parent().children('.title')).removeClass('active');

			$(others).not(items).slideUp('slow');
			items.slideToggle('slow');

			$(this).toggleClass('active');
			if($(this).hasClass('active')){
			}else{
				$(lower_levels).removeClass('active');
			}

			event.preventDefault();
			return false;
		});

		$('.content_accordion ul').each(function(){
			$(this).find('.item:last').addClass('last');
		});
	});
</script>

<div class="content_accordion_wrap">
	<ul class="content_accordion">
		<li>
			<a href="#" class="l1 title">Music</a>
			<ul class="rtl">
				<li>
					<a href="#" class="l2 title"><span>&raquo;</span>Chiptune</a>
					<ul>
					<txp:article_custom limit="999" section="music" category="chiptune" sort="Posted asc" time="any">
						<li class="item">
							<a href="?event=article&step=edit&ID=<txp:article_id />">
								<img src="<txp:image_url id='<txp:custom_field name="article_image" />' thumbnail="1" />" alt="" />
								<span>
									<b><txp:custom_field name="Artist Name" /></b>
									<br /><txp:custom_field name="Release Title" />
								</span>
							</a>
						</li>
					</txp:article_custom>
					</ul>
				</li>

				<li>
					<a href="#" class="l2 title"><span>&raquo;</span>Trance</a>
					<ul>
					<txp:article_custom limit="999" section="music" category="trance" sort="Posted asc" time="any">
						<li class="item">
							<a href="?event=article&step=edit&ID=<txp:article_id />">
								<img src="<txp:image_url id='<txp:custom_field name="article_image" />' thumbnail="1" />" alt="" />
								<span>
									<b><txp:custom_field name="Artist Name" /></b>
									<br /><txp:custom_field name="Release Title" />
								</span>
							</a>
						</li>
					</txp:article_custom>
					</ul>
				</li>

				<li>
					<a href="#" class="l2 title"><span>&raquo;</span>Techno</a>
					<ul>
					<txp:article_custom limit="999" section="music" category="techno" sort="Posted asc" time="any">
						<li class="item">
							<a href="?event=article&step=edit&ID=<txp:article_id />">
								<img src="<txp:image_url id='<txp:custom_field name="article_image" />' thumbnail="1" />" alt="" />
								<span>
									<b><txp:custom_field name="Artist Name" /></b>
									<br /><txp:custom_field name="Release Title" />
								</span>
							</a>
						</li>
					</txp:article_custom>
					</ul>
				</li>
			</ul>
		</li>

		<li>
			<a href="#" class="l1 title">Videos</a>
			<ul class="videos">
			<txp:article_custom limit="999" section="videos" sort="Posted asc" time="any">
				<li class="item">
					<a href="?event=article&step=edit&ID=<txp:article_id />">
						<img src="http://img.youtube.com/vi/<txp:rah_replace from="http://www.youtube.com/watch?v=,www.youtube.com/watch?v=,youtube.com/watch?v=,http://youtu.be/,youtu.be/" to=""><txp:custom_field name="Youtube Video Link" /></txp:rah_replace>/0.jpg" alt="" />
						<span><txp:title /></span>
					</a>
				</li>
			</txp:article_custom>
			</ul>
		</li>

	</ul>
</div>

Third step

Install the plugins – smd_tabber & bot_write_tab_customize

Fourth step

Create a new tab Inside smd_tabber (Admin > Manage tabs) and name it as Content Accordion
In the page template and the stylesheet options choose these you just created (content_accordion)

Fifth step

Go to bot_write_tab_customize UI (Extensions > bot_wtc) and click on Additional js code
Inside the small window that just opened paste the next codes:

<script type="text/javascript">
	$(document).ready(function() {

		// Content accordion
		$('#page-article td#article-col-1').prepend('<div class="content_accordion_wrap"></div>');
		$('#page-article td#article-col-1 .content_accordion_wrap').load('?event=content-accordion .content_accordion', function(){

			$('.content_accordion a.title').click(function(event){
				var items = $(this).next();
				var level = $(this).attr('class').replace(/ title| active/g,'');
				var lower_levels = $('.'+level).parent('li').find('.title');
				var others = $('.'+level).parent('li').find('ul');

				$('.'+level+'.title').not($(items).parent().children('.title')).removeClass('active');

				$(others).not(items).slideUp('slow');
				items.slideToggle('slow');

				$(this).toggleClass('active');
				if($(this).hasClass('active')){
				}else{
					$(lower_levels).removeClass('active');
				}

				event.preventDefault();
				return false;
			});

			$('.content_accordion ul').each(function(){
				$(this).find('.item:last').addClass('last');
			});
		});

    });
</script>

<link rel="stylesheet" type="text/css" media="screen" href="css.php?n=tabber_content_accordion" />

Sixth step

Go and take a look at your Write tab to see the result :)

Seventh step

Now all you need to do is to go back to the page template (Presentation > Pages > tabber_content_accordion)
and edit it as you want.

Eighth step

Customizing and structure info:

Simple one level item code:

<li>
	<a href="#" class="l1 title">My section / category name</a>
	<ul class="videos">
	<txp:article_custom limit="999" section="my-section" category="category-name" sort="Posted asc">
		<li class="item">
			<a href="?event=article&step=edit&ID=<txp:article_id />">
				<txp:article_image thumbnail="1" />
				<span><txp:title /></span>
			</a>
		</li>
	</txp:article_custom>
	</ul>
</li>

2 levels item code:
pay attention that each second level .title <a> tag, got a class of l2 which means level2, to create third levels and more all needs is to change l2 to l3 / l4 / l5 …

<li>
	<a href="#" class="l1 title">My section name</a>
	<ul>

		<li>
			<a href="#" class="l2 title"><span>&raquo;</span>My first category name</a>
			<ul>
			<txp:article_custom limit="999" section="my-section" category="first-category-name" sort="Posted asc">
				<li class="item">
					<a href="?event=article&step=edit&ID=<txp:article_id />">
						<txp:article_image thumbnail="1" />
						<span><txp:title /></span>
					</a>
				</li>
			</txp:article_custom>
			</ul>
		</li>

		<li>
			<a href="#" class="l2 title"><span>&raquo;</span>My second category name</a>
			<ul>
			<txp:article_custom limit="999" section="my-section" category="second-category-name" sort="Posted asc">
				<li class="item">
					<a href="?event=article&step=edit&ID=<txp:article_id />">
						<txp:article_image thumbnail="1" />
						<span><txp:title /></span>
					</a>
				</li>
			</txp:article_custom>
			</ul>
		</li>

	</ul>
</li>

Last thing about the items structure:
You can play with it as you want, you can add other plugins as for example rah_replace. What I’m trying to say is that it’s not limited and it’s just like a regular TXP page of your site so you can freely play with.

CSS styling
You can totally change the look as you want to, to create a different look to a specific section/category items all you need is to add a CLASS to the <ul> tag that contains the items.

For example like in my original code which you can see ul class=“videos”>:

<li>
	<a href="#" class="l1 title">Videos</a>
	<ul class="videos">
	<txp:article_custom limit="999" section="videos" sort="Posted asc" time="any">
		<li class="item">
			<a href="?event=article&step=edit&ID=<txp:article_id />">
				<img src="http://img.youtube.com/vi/<txp:rah_replace from="http://www.youtube.com/watch?v=,www.youtube.com/watch?v=,youtube.com/watch?v=,http://youtu.be/,youtu.be/" to=""><txp:custom_field name="Youtube Video Link" /></txp:rah_replace>/0.jpg" alt="" />
				<span><txp:title /></span>
			</a>
		</li>
	</txp:article_custom>
	</ul>
</li>

and now the css:
(which can be found at the bottom of the example css stylesheet code from above)

.content_accordion ul.videos .item a span {
	line-height:14px;
}

BTW:
Yes if you want then you can replace smd_tabber with a section & a page, or rah_external_output

Enjoy!

More Write tab tricks tips are coming soon, your clients are gonna love it! and so are you ;)

Video tutorials

The YouTube video may be seen below, and a here is a link to the same video on Facebook.

7 Comments - Comments RSS Feed

Mave
# 16 August 2011

Very cool, Gil! Thanks for sharing this. I can think of a few clients who could really benefit from this ease of use.

Marc Carson
# 16 August 2011

Awesome tutorial Gil! I wonder if it would be possible to create a link at the top of an accordion child list, like “Create new item here.” That might be even more convenient for clients.

Mike
# 16 August 2011

Hey,

Does anyone know how ul.content_accordion is injected into the wrapping div in the write page? it seems to be this line

$(’#page-article td#article-col-1 .content_accordion_wrap’).load(’?event=content-accordion .content_accordion’, function(){

but I don’t understand how appending the urlvar ‘?event=content-accordion actually injects the code from the tabber template into the table.

What is ?event used for?

Thanks,
Mike

Mike
# 16 August 2011

i get it. ?event=name of tab minus tabber-

Gil Goldshlager
# 16 August 2011

Thanks :)

.
@Marc Carson – Yes that can be sweet :)
I will see what I can do, one of the others tips that I plan to publish it’s a one for creating custom sections&categories menus that it’s kind of the same of your idea.
(Hope to publish it this weekend)

.

@Mike – Yes it’s the tab name which doesn’t include the Page/Style prefix (tabber_) of smd_tabber plugin.

?event=content-accordion it’s the url,
and .content_accordion it’s the class name of the specific selector to grab.

You can check the jQuery doc page of the .load() function.

Gil Goldshlager
# 20 August 2011

For those that doesn’t have a Facebook account (apparently there are), you can now watch the demo video on Youtube: Link to the video

Use the “Expand” button in the Youtube player (near the “Full screen” button) to see the video in it’s full size (640×480).

Jonathan Stubbs
# 21 August 2011

Video has now been added to this tutorial – at the end. Thanks to Gil for posting the video.

Add a comment

Required

Required, not displayed

Optional

Use Textile Help to style your comments