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>»</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>»</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>»</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>»</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>»</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.
<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.
Clicking play connects you with youtube.com
Very cool, Gil! Thanks for sharing this. I can think of a few clients who could really benefit from this ease of use.
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.
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
i get it. ?event=name of tab minus tabber-
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.
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).
Video has now been added to this tutorial – at the end. Thanks to Gil for posting the video.