Here's another useful widget for your Weebly site. They called it accordion. Accordion saves space while keeping contents in place. They are useful serving as navigation to your sidebar usually navigated with a drop down arrow which shows hidden contents when clicked. We will use the script found at mybloggertricks.com though I have to edit it (heavily) to make it more personal and can be customized your own. You can check the original script from "script source" located at the demo page.
1. The code below is the JavaScript and CSS combined. Now if you want to insert it to a single page or the whole site better read: 3 Ways on Editing Weebly's <head>. Once decided, paste now these code on the <head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script>
//<![CDATA[
$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
/* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */
$.easing.def = "easeOutBounce";
/* Binding a click event handler to the links: */
$('li.button a').click(function(e){
/* Finding the drop down list that corresponds to the current section: */
var dropDown = $(this).parent().next();
/* Closing all other drop down sections, except the current one */
$('.dropdown1').not(dropDown).slideUp('slow');
dropDown.stop(false,true).slideToggle('slow');
/* Preventing the default event (which would be to navigate the browser to the link's address) */
e.preventDefault();
})
});
// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,
{
def: 'easeOutQuad',
swing: function (x, t, b, c, d) {
//alert(jQuery.easing.default);
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
},
easeInQuad: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
},
easeOutQuad: function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
},
easeInOutQuad: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInCubic: function (x, t, b, c, d) {
return c*(t/=d)*t*t + b;
},
easeOutCubic: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOutCubic: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
},
easeInQuart: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t + b;
},
easeOutQuart: function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOutQuart: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
easeInQuint: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t*t + b;
},
easeOutQuint: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOutQuint: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
},
easeInSine: function (x, t, b, c, d) {
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOutSine: function (x, t, b, c, d) {
return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOutSine: function (x, t, b, c, d) {
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
},
easeInExpo: function (x, t, b, c, d) {
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOutExpo: function (x, t, b, c, d) {
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOutExpo: function (x, t, b, c, d) {
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
easeInOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
easeInBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
easeInBounce: function (x, t, b, c, d) {
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
easeInOutBounce: function (x, t, b, c, d) {
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
}
});
//]]>
</script>
<style>
/*------ Accordion Widget by MBT -----*/
/*---- Modified by MWT for Weebly ----*/
ul.container{
width:275px;
margin:0 auto;
padding:10px;
background:#DF0101!important;
}
li.menu{
padding:5px 0;
width:100%;
}
li.button a{
display:block;
color:#FFFFFF;
font-weight:bold;
font-family: Arial, sans-serif,Helvetica;
font-size:16px;
overflow:hidden;
padding:0px 0px 5px 0;
position:relative;
width:100%;
text-transform:capitalize;
}
li.button a:hover{
text-decoration:none!important;
}
li.button a span{
right:0px;
top:0px;
position:absolute;
color:#ccc;
display:block;
}
.dropdown1{
display:none;
padding-top:5px;
width:100%;
list-style: none;
}
.dropdown1 li{
font-family: Arial, sans-serif,Helvetica;
font-size:12px;
border:1px solid #ffffff;
color:#ffffff;
margin:5px 0;
padding:4px 10px;
word-wrap: break-word;
}
.dropdown1 li a{
text-decoration:none;
color:#FFFF00;
}
.dropdown1 li:hover {
border:1px solid #ccc;
text-decoration:none;
}
.dropdown1 li a:hover {
text-decoration:none;
color:#FFFF00;
}
<script>
//<![CDATA[
$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
/* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */
$.easing.def = "easeOutBounce";
/* Binding a click event handler to the links: */
$('li.button a').click(function(e){
/* Finding the drop down list that corresponds to the current section: */
var dropDown = $(this).parent().next();
/* Closing all other drop down sections, except the current one */
$('.dropdown1').not(dropDown).slideUp('slow');
dropDown.stop(false,true).slideToggle('slow');
/* Preventing the default event (which would be to navigate the browser to the link's address) */
e.preventDefault();
})
});
// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,
{
def: 'easeOutQuad',
swing: function (x, t, b, c, d) {
//alert(jQuery.easing.default);
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
},
easeInQuad: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
},
easeOutQuad: function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
},
easeInOutQuad: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInCubic: function (x, t, b, c, d) {
return c*(t/=d)*t*t + b;
},
easeOutCubic: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOutCubic: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
},
easeInQuart: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t + b;
},
easeOutQuart: function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOutQuart: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
easeInQuint: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t*t + b;
},
easeOutQuint: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOutQuint: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
},
easeInSine: function (x, t, b, c, d) {
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOutSine: function (x, t, b, c, d) {
return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOutSine: function (x, t, b, c, d) {
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
},
easeInExpo: function (x, t, b, c, d) {
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOutExpo: function (x, t, b, c, d) {
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOutExpo: function (x, t, b, c, d) {
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
easeInOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
easeInBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
easeInBounce: function (x, t, b, c, d) {
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
easeInOutBounce: function (x, t, b, c, d) {
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
}
});
//]]>
</script>
<style>
/*------ Accordion Widget by MBT -----*/
/*---- Modified by MWT for Weebly ----*/
ul.container{
width:275px;
margin:0 auto;
padding:10px;
background:#DF0101!important;
}
li.menu{
padding:5px 0;
width:100%;
}
li.button a{
display:block;
color:#FFFFFF;
font-weight:bold;
font-family: Arial, sans-serif,Helvetica;
font-size:16px;
overflow:hidden;
padding:0px 0px 5px 0;
position:relative;
width:100%;
text-transform:capitalize;
}
li.button a:hover{
text-decoration:none!important;
}
li.button a span{
right:0px;
top:0px;
position:absolute;
color:#ccc;
display:block;
}
.dropdown1{
display:none;
padding-top:5px;
width:100%;
list-style: none;
}
.dropdown1 li{
font-family: Arial, sans-serif,Helvetica;
font-size:12px;
border:1px solid #ffffff;
color:#ffffff;
margin:5px 0;
padding:4px 10px;
word-wrap: break-word;
}
.dropdown1 li a{
text-decoration:none;
color:#FFFF00;
}
.dropdown1 li:hover {
border:1px solid #ccc;
text-decoration:none;
}
.dropdown1 li a:hover {
text-decoration:none;
color:#FFFF00;
}
</style>
Save it and proceed to Step 2.
2. Now go to the page you want to insert your accordion and paste the following HTML code (as shown on the demo):
<ul class="container">
<!- TAB ONE -->
<li class="menu">
<ul>
<li class="button"><a href="#" >Site Navigation<span>▼</span></a></li>
<li class="dropdown1">
<ul>
<li>1. <a href="http://www.myweeblytricks.com/" >Weebly Tricks #34 - Sticky Top Notification Bar</a></li>
<li>2. <a href="http://www.myweeblytricks.com/">Weebly Tricks #33 - Web Page Preloader</a></li>
<li>3. <a href="http://www.myweeblytricks.com/">Weebly Tricks #30 - Simple Site Pagination</a></li>
<li>5. <a href="http://www.myweeblytricks.com/">Weebly Tricks #13 - Push Down Panel for Hidden Content</a></li>
<li>4. <a href="http://www.myweeblytricks.com/">ADD LINK TEXT HERE</a></li>
</ul>
</li>
</ul>
</li>
<!- TAB TWO -->
<li class="menu">
<ul>
<li class="button"><a href="#" >Image Mouseover<span>▼</span></a></li>
<li class="dropdown1">
<ul>
<li>1. <a href="http://www.myweeblytricks.com/" >Weebly Tricks #31 - Bloating/ Enlarge Image</a></li>
<li>2. <a href="http://www.myweeblytricks.com/">Weebly Tricks #17 - Flat Flipping Menus/ Buttons</a></li>
<li>3. <a href="http://www.myweeblytricks.com/">Weebly Tricks #16 - Before and After Photo Effects</a></li>
<li>5. <a href="http://www.myweeblytricks.com/">Weebly Tricks #23 - Add a Sonar/ Pulsating Effect to Photo or Text</a></li>
<li>4. <a href="http://www.myweeblytricks.com/">ADD LINK TEXT HERE</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a href="#" >ADD TAB TITLE HERE<span>▼</span></a></li>
<li class="dropdown1">
<ul>
<li>1. <a href="ADD LINK HERE" >ADD LINK TEXT HERE</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a href="#" >ADD TAB TITLE HERE<span>▼</span></a></li>
<li class="dropdown1">
<ul>
<li>1. <a href="ADD LINK HERE" >ADD LINK TEXT HERE</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<!- TAB ONE -->
<li class="menu">
<ul>
<li class="button"><a href="#" >Site Navigation<span>▼</span></a></li>
<li class="dropdown1">
<ul>
<li>1. <a href="http://www.myweeblytricks.com/" >Weebly Tricks #34 - Sticky Top Notification Bar</a></li>
<li>2. <a href="http://www.myweeblytricks.com/">Weebly Tricks #33 - Web Page Preloader</a></li>
<li>3. <a href="http://www.myweeblytricks.com/">Weebly Tricks #30 - Simple Site Pagination</a></li>
<li>5. <a href="http://www.myweeblytricks.com/">Weebly Tricks #13 - Push Down Panel for Hidden Content</a></li>
<li>4. <a href="http://www.myweeblytricks.com/">ADD LINK TEXT HERE</a></li>
</ul>
</li>
</ul>
</li>
<!- TAB TWO -->
<li class="menu">
<ul>
<li class="button"><a href="#" >Image Mouseover<span>▼</span></a></li>
<li class="dropdown1">
<ul>
<li>1. <a href="http://www.myweeblytricks.com/" >Weebly Tricks #31 - Bloating/ Enlarge Image</a></li>
<li>2. <a href="http://www.myweeblytricks.com/">Weebly Tricks #17 - Flat Flipping Menus/ Buttons</a></li>
<li>3. <a href="http://www.myweeblytricks.com/">Weebly Tricks #16 - Before and After Photo Effects</a></li>
<li>5. <a href="http://www.myweeblytricks.com/">Weebly Tricks #23 - Add a Sonar/ Pulsating Effect to Photo or Text</a></li>
<li>4. <a href="http://www.myweeblytricks.com/">ADD LINK TEXT HERE</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a href="#" >ADD TAB TITLE HERE<span>▼</span></a></li>
<li class="dropdown1">
<ul>
<li>1. <a href="ADD LINK HERE" >ADD LINK TEXT HERE</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a href="#" >ADD TAB TITLE HERE<span>▼</span></a></li>
<li class="dropdown1">
<ul>
<li>1. <a href="ADD LINK HERE" >ADD LINK TEXT HERE</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Publish your site and see the sample.
3. Here's how you can make changes, please refer to the CSS at step 1.
width:275px; - for the accordion width
padding:10px - the padding of the whole accordion (important to adjust)
padding:10px - the padding of the whole accordion (important to adjust)
background:#DF0101!important; - for the accordion background, do not remove !important
li.button a - settings for the individual tab title including its font style, size and color
color:#ccc - for the down arrow color, change if you like.
.dropdown1 li - settings for the row numbering color, border color, the text size on the list.
color:#FFFF00 - color of the text inside the list.
color:#FFFF00- hover color of sentences on the list.
4. Referring on the step 2 HTML code, you can add more tabs by pasting this code above the </ul>:<li class="menu">
<ul>
<li class="button"><a href="#" >ADD TAB TITLE HERE<span>▼</span></a></li>
<li class="dropdown1">
<ul>
<li>1. <a href="ADD LINK HERE" >ADD LINK TEXT HERE</a></li>
</ul>
</li>
</ul>
</li>
<ul>
<li class="button"><a href="#" >ADD TAB TITLE HERE<span>▼</span></a></li>
<li class="dropdown1">
<ul>
<li>1. <a href="ADD LINK HERE" >ADD LINK TEXT HERE</a></li>
</ul>
</li>
</ul>
</li>
Where in just replace the instructions such as tab title, the link and link text. To add more rows just copy the yellow marked tag and paste below it, just make sure to change the row number ascending.
Any questions, just comment below.
0 comments: