On a site I am working on, when you go to it, the first slider is showing. I want the user to have to click on the (+) to show the content.
Here is what I mean
Site
http://myfuturesite-lumbermenonline.com/item.html
Javascript
/*
* Lean Slider v1.0
* http://dev7studios.com/lean-slider
*
* Copyright 2012, Dev7studios
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
;(function($) {
$.fn.leanSlider = function(options) {
// Defaults
var defaults = {
pauseTime: 4000,
pauseOnHover: true,
startSlide: 0,
directionNav: '',
directionNavPrevBuilder: '',
directionNavNextBuilder: '',
controlNav: '',
controlNavBuilder: '',
prevText: 'Prev',
nextText: 'Next',
beforeChange: function(){},
afterChange: function(){},
afterLoad: function(){}
};
// Set up plugin vars
var plugin = this,
settings = {},
slider = $(this),
slides = slider.children(),
currentSlide = 0,
timer = 0;
var init = function() {
// Set up settings
settings = $.extend({}, defaults, options);
// Add inital classes
slider.addClass('lean-slider');
slides.addClass('lean-slider-slide');
currentSlide = settings.startSlide;
if(settings.startSlide < 0 || settings.startSlide >= slides.length) currentSlide = 0;
$(slides[currentSlide]).addClass('current');
// Set up directionNav
if(settings.directionNav && $(settings.directionNav).length){
var prevNav = $('<a href="#" class="lean-slider-prev">'+ settings.prevText +'</a>'),
nextNav = $('<a href="#" class="lean-slider-next">'+ settings.nextText +'</a>');
if(settings.directionNavPrevBuilder) prevNav = $(settings.directionNavPrevBuilder.call(this, settings.prevText));
if(settings.directionNavNextBuilder) nextNav = $(settings.directionNavNextBuilder.call(this, settings.nextText));
prevNav.on('click', function(e){
e.preventDefault();
plugin.prev();
});
nextNav.on('click', function(e){
e.preventDefault();
plugin.next();
});
$(settings.directionNav).append(prevNav);
$(settings.directionNav).append(nextNav);
}
// Set up controlNav
if(settings.controlNav && $(settings.controlNav).length){
slides.each(function(i){
var controlNav = $('<a href="#" class="lean-slider-control-nav">'+ (i + 1) +'</a>');
if(settings.controlNavBuilder) controlNav = $(settings.controlNavBuilder.call(this, i, $(slides[i])));
controlNav.on('click', function(e){
e.preventDefault();
plugin.show(i);
});
$(settings.controlNav).append(controlNav);
});
}
// Set up pauseOnHover
if(settings.pauseOnHover && settings.pauseTime && settings.pauseTime > 0){
slider.hover(
function () {
clearTimeout(timer);
},
function () {
doTimer();
}
);
}
// Initial processing
updateControlNav();
doTimer();
// Trigger the afterLoad callback
settings.afterLoad.call(this);
return plugin;
};
// Process timer
var doTimer = function(){
if(settings.pauseTime && settings.pauseTime > 0){
clearTimeout(timer);
timer = setTimeout(function(){ plugin.next(); }, settings.pauseTime);
}
};
// Update controlNav
var updateControlNav = function(){
if(settings.controlNav){
$('.lean-slider-control-nav', settings.controlNav).removeClass('active');
$($('.lean-slider-control-nav', settings.controlNav).get(currentSlide)).addClass('active');
}
};
// Prev
plugin.prev = function(){
// Trigger the beforeChange callback
settings.beforeChange.call(this, currentSlide);
currentSlide--;
if(currentSlide < 0) currentSlide = slides.length - 1;
slides.removeClass('current');
$(slides[currentSlide]).addClass('current');
updateControlNav();
doTimer();
// Trigger the afterChange callback
settings.afterChange.call(this, currentSlide);
};
// Next
plugin.next = function(){
// Trigger the beforeChange callback
settings.beforeChange.call(this, currentSlide);
currentSlide++;
if(currentSlide >= slides.length) currentSlide = 0;
slides.removeClass('current');
$(slides[currentSlide]).addClass('current');
updateControlNav();
doTimer();
// Trigger the afterChange callback
settings.afterChange.call(this, currentSlide);
};
// Show
plugin.show = function(index){
// Trigger the beforeChange callback
settings.beforeChange.call(this, currentSlide);
currentSlide = index;
if(currentSlide < 0) currentSlide = slides.length - 1;
if(currentSlide >= slides.length) currentSlide = 0;
slides.removeClass('current');
$(slides[currentSlide]).addClass('current');
updateControlNav();
doTimer();
// Trigger the afterChange callback
settings.afterChange.call(this, currentSlide);
};
// Call constructor
return init();
};
})(jQuery);
HTML for slider
<div id="Content_pnlContact">
<h2 class="acc_trigger"><a href="#">Contact Us</a></h2>
<div class="acc_container">
<div class="block" style="font-family:'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; font-size:14px""> Click <a href="#"></a>HERE</a> to contact us
</div>
</div>
</div>
<div id="Content_pnlOverview">
<h2 class="acc_trigger"><a href="#">Overview</a></h2>
<div class="acc_container">
<div class="block" style="font-family:'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; font-size:14px"">
<span id="Content_lblOverview">The Skewing Overhead takes the best of the Original Overhead with additional new features that increases both yield and production over the Standard Overhead.<br><br>
This machine includes skewing log turners that are able to skew up to 3" left/right. This allows the Overhead to create two equal faces on the log to increase yield on marginal logs and reduce the amount of boards to be edged.<br><br>
We have also included an improved cant support square stabilizer, which supports and squares the cant to get better boards and cants on marginal logs.
</span>
</div>
</div>
</div>
<div id="Content_pnlFeatures">
<h2 class="acc_trigger"><a href="#">Features</a></h2>
<div class="acc_container">
<div class="block" style="font-family:'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; font-size:14px"">
<ul style="padding: 10px;"><li style="list-style-type: circle;">1/2" to 1 1/8" Board Thickness</li><li style="list-style-type: circle;">3 1/2" to 6" Board Width (with proper setting)</li><li style="list-style-type: circle;">30" Minimum to 60" Maximum Board Length</li><li style="list-style-type: circle;">Variable Speed Feed Rate</li><li style="list-style-type: circle;">10" Diameter Cutter (8) Wing Index Able Carbide Insert</li></ul>
</div>
</div>
</div>
<div id="Content_pnlSpecs">
<h2 class="acc_trigger"><a href="#">Specs</a></h2>
<div class="acc_container">
<div class="block" style="font-family:'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; font-size:14px"">
<b>Board Specs</b><br/><ul><li style="margin-left: 30px; list-style-type: circle; ">Thickness: 1/2" to 1 1/8"</li><li style="margin-left: 30px; list-style-type: circle; ">Width: 3 1/2" to 6" with proper setting </li><li style="margin-left: 30px; list-style-type: circle; ">Length: 30" minimum to 60" maximum</li></ul><br/><b>Cutter</b><br/><ul><li style="margin-left: 30px; list-style-type: circle; ">10" diameter (8) wing index able carbide insert. This is an outstanding improvement over all others. Cutters stay sharp longer and run noticeably quieter.</li></ul><br/><b>Dust Pickup</b><br/><ul><li style="margin-left: 30px; list-style-type: circle; ">4" by 10" rectangular opening over cutter heads</li></ul><br/></li>
</div>
</div>
</div>
<div id="Content_pnlVideo">
<h2 class="acc_trigger"><a href="#">Video</a></h2>
<div class="acc_container">
<div class="block" style="font-family:'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; font-size:14px"">
<video width="320" height="240" controls>
<source src="http://www.coopermachine.com//machineimages/Skewing_Overhead_Scrag/vid/Overhead_w_Skew_and_Lift_Dog_Aug_2012.flv" type="video/FLV">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
<div id="Content_pnlTesti">
<h2 class="acc_trigger"><a href="#">Testimonials</a></h2>
<div class="acc_container">
<div class="block" style="font-family:'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; font-size:14px"">
This machine is awesome!!
</div>
</div>
</div>
Any help would be greatly appreciated.