Reworked a bit of slider code from 45royale.com. We are using it on our new site so I figured I would share with all =)
----
1) Grab http://prototype.conio.net and http://script.aculo.us
2) Make sure effects.js has the Combo Variables code [displayed below]
3) Add the css code to your css file
4) Add slider code to HTML files
5) Add a button image to your media folder
----
/*
--------------------------------------------------
Combo Variables code
--------------------------------------------------
*/
Effect.OpenUp = function(element) {
element = $(element);
new Effect.BlindDown(element, arguments[1] || {});
}
Effect.CloseDown = function(element) {
element = $(element);
new Effect.BlindUp(element, arguments[1] || {});
}
Effect.Combo = function(element) {
element = $(element);
if(element.style.display == ‘none’) {
new Effect.OpenUp(element, arguments[1] || {});
}else {
new Effect.CloseDown(element, arguments[1] || {});
}
}
----
/*
--------------------------------------------------
slider css code
--------------------------------------------------
*/
.slider {
width: 629px;
margin: 0px 0px 0px 0px;
padding: 7px 7px 0px 7px;
border: 1px solid #999999;
}
.slider a {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: #ffffff url(/media/new/plus-button.png) no-repeat center right;
min-height: 25px;
/* border: 1px solid #999999; */
display: block;
color: #606060;
}
.slider a:hover {
color: #999999;
}
----
<!-- html code -->
<div class=”slider”>
<h5><a href=”javascript:Effect.Combo(‘slide-content’, {duration: .5});”>
Click to slide</a></h5>
<div id=”slide-content” style=”display:none;”>
Content you want to slide
</div> <!-- id=”slide-content” -->
</div> <!-- class=”slider” -->
----
Button --> 