Gaspare Sganga

IT Supervisor, GIS Analyst & Lead Developer @setin.

Freelance Developer & Consultant.

Buy me a coffee?

Contents

Quick Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et quam nec mauris maximus blandit et in diam. Praesent semper viverra bibendum. Donec suscipit ullamcorper ipsum vitae suscipit. Sed porta, tellus eu suscipit mollis, purus sem euismod elit, et ultrices velit dolor a neque. Ut semper massa sit amet scelerisque laoreet. Curabitur neque nisi, volutpat sed auctor non, lobortis sit amet sem. Nullam placerat erat quis porta elementum. Ut accumsan massa a arcu ultrices lobortis. Nulla a quam at est efficitur volutpat nec non lacus. Duis et pellentesque ligula.

Get it

GitHub

View project on GitHub or download the latest release.

Methods

$(selector).SlideToggler([options])

Initialize the SlideToggler on an element, providing some options.

$(selector).SlideToggler(action [,customSpeed])

There are 4 actions available: show, hide, status and remove.

Show & Hide

$(selector).SlideToggler("show" [,customSpeed])
$(selector).SlideToggler("hide" [,customSpeed])
Use the actions show and hide to programmatically open and close the SlideToggler, optionally providing a customSpeed to override the speed setting. A chainable jQuery object/collection is returned.

Status

$(selector).SlideToggler("status")
Use the action status to get a boolean value representing the current open (true) or closed (false) status of the SlideToggler. The return value corresponds to the first element in the set of matched elements.

Remove

$(selector).SlideToggler("remove")
Use the action remove to revert the element back to its original condition, removing the SlideToggler. A chainable jQuery object/collection is returned.

$.SlideTogglerSetup(options)

Set default options for all future calls to $(selector).SlideToggler(options).

Options and defaults values

autoHide        : true              // Boolean
speed           : 400               // Integer/String
statusHide      : "▲"               // String
statusPosition  : "left"            // String
statusShow      : "▼"               // String
title           : "Slide Toggler"   // String
titleAlign      : "center"          // String
toggler         : true              // Boolean
toolTipHide     : "Hide"            // String
toolTipShow     : "Show"            // String
autoHide

Set to true to initialize the SlideToggler in closed status. Set to false to leave it open.

speed

Speed in milliseconds. It is passed to jQuery .slideToggle() function as duration, so you can use supported strings as well.

statusHide

Text/Html to show in the status when the SlideToggler is open.

statusPosition

Defines position of the status icon/text. It can be left, right or both.

statusShow

Text/Html to show in the status when the SlideToggler is closed.

title

The title of the SlideToggler.

titleAlign

Defines alignment of the title. It can be left, center or right.

toggler

Set to false to produce an open static SlideToggler. This can be useful for user interface purposes, i.e. you would like to apply a consistent style without actually enable any toggling functionality on some elements.

toolTipHide

Tool tip to show when mouse pointer passes over open SlideToggler.

toolTipShow

Tool tip to show when mouse pointer passes over closed SlideToggler.

Events

See Example 2 for details, especially about data passed to the event handlers.

BeforeShow

$(selector).on("beforeshow.slidetoggler", function(event, data){})
Fired before the show action is performed. Actual speed (default or custom one) and title are passed as data to the event handler.

AfterShow

$(selector).on("aftershow.slidetoggler", function(event, data){})
Fired after the show action is performed. title is passed as data to the event handler.

BeforeHide

$(selector).on("beforehide.slidetoggler", function(event, data){})
Fired before the hide action is performed. Actual speed (default or custom one) and title are passed as data to the event handler.

AfterHide

$(selector).on("afterhide.slidetoggler", function(event, data){})
Fired after the hide action is performed. title is passed as data to the event handler.

Examples

Example 1 - Default options and get Status

HTML
<div id="example1">
    Lorem ipsum dolor sit amet..... 
</div>
<input id="example1_button" type="button" value="Get Status">
Javascript
$("#example1").SlideToggler({
    title   : "Example 1"
});
$("#button").on("click", function(event){
    console.log($("#example1").SlideToggler("status") ? "SlideToggler is Open" :  "SlideToggler is Closed");
});
Result
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et quam nec mauris maximus blandit et in diam. Praesent semper viverra bibendum. Donec suscipit ullamcorper ipsum vitae suscipit. Sed porta, tellus eu suscipit mollis, purus sem euismod elit, et ultrices velit dolor a neque. Ut semper massa sit amet scelerisque laoreet. Curabitur neque nisi, volutpat sed auctor non, lobortis sit amet sem. Nullam placerat erat quis porta elementum. Ut accumsan massa a arcu ultrices lobortis. Nulla a quam at est efficitur volutpat nec non lacus. Duis et pellentesque ligula.

Example 2 - Events

HTML
<div id="example2">
    Look at the box down here, it will show the events fired
</div>
Javascript
$("#example2").SlideToggler({
    autoHide   : false,
    speed      : 2000,
    title      : "Example 2"
}).on("beforeshow.slidetoggler", function(event, data){
    console.log("Event BeforeShow fired. Data:");
    console.log(data);
}).on("aftershow.slidetoggler", function(event, data){
    console.log("Event AfterShow fired. Data:");
    console.log(data);
}).on("beforehide.slidetoggler", function(event, data){
   console.log("Event BeforeHide fired. Data:");
   console.log(data);
}).on("afterhide.slidetoggler", function(event, data){
    console.log("Event AfterHide fired. Data:");
    console.log(data);
});
Result
Look at the box down here, it will show the events fired
Use the SlideToggler to log the events here

Example 3 - Using events create an accordion-like behaviour

HTML
<div id="example3">
    <div id="example3_content1">Content 1 Content 1 Content 1 ... </div>
    <div id="example3_content2">Content 2 Content 2 Content 2 ... </div>
    <div id="example3_content3">Content 3 Content 3 Content 3 ... </div>
    <div id="example3_content4">Content 4 Content 4 Content 4 ... </div>
</div>
Javascript
// Initialize SlideTogglers
$("#example3_content1").SlideToggler({title : "Title 1"});
$("#example3_content2").SlideToggler({title : "Title 2"});
$("#example3_content3").SlideToggler({title : "Title 3"});
$("#example3_content4").SlideToggler({title : "Title 4"});
// Use BeforeShow event to hide the other panels
$("#example3").on("beforeshow.slidetoggler", ".slidetoggler", function(event, data){
    $("#example3").find(".slidetoggler").not(event.currentTarget).SlideToggler("hide", data.speed);
});
Result
Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1
Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2
Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3
Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4

Example 4 - Static

HTML
<div id="example4">
    Lorem ipsum dolor sit amet.....
</div>
Javascript
$("#example4").SlideToggler({
    title     : "Example 4",
    toggler   : false
});	
Result
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et quam nec mauris maximus blandit et in diam. Praesent semper viverra bibendum. Donec suscipit ullamcorper ipsum vitae suscipit. Sed porta, tellus eu suscipit mollis, purus sem euismod elit, et ultrices velit dolor a neque. Ut semper massa sit amet scelerisque laoreet. Curabitur neque nisi, volutpat sed auctor non, lobortis sit amet sem. Nullam placerat erat quis porta elementum. Ut accumsan massa a arcu ultrices lobortis. Nulla a quam at est efficitur volutpat nec non lacus. Duis et pellentesque ligula.

Example 5 - Playing with title and status

Javascript
$("#example5_content1").SlideToggler({
    statusPosition  : "left",
    title           : "Title 1",
    titleAlign      : "left"
});
$("#example5_content2").SlideToggler({
    statusPosition  : "right",
    title           : "Title 2",
    titleAlign      : "left"
});
$("#example5_content3").SlideToggler({
    statusPosition  : "right",
    title           : "Title 3",
    titleAlign      : "right"
});
$("#example5_content4").SlideToggler({
    statusHide      : "<img src='hide.png'>",
    statusPosition  : "both",
    statusShow      : "<img src='show.png'>",
    title           : "Title 4",
    titleAlign      : "center"
});
Result
Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1
Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2
Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3 Content 3
Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4 Content 4

Example 6 - Using a wrapper to manipulate width

HTML
<div id="example6_wrapper">
    <div id="example6_content">
        Lorem ipsum dolor sit amet.....
    </div>
</div>
Javascript
$("#example6_content").SlideToggler({
    title : "Example 6"
});
$("#example6_button").on("click", function(event){
    var wrapper = $("#example6_wrapper");
    wrapper.animate({
        width : "200px"
    }, 3000, function(){
        wrapper.animate({
            width : "100%"
        }, 3000);
    });
});
Result
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et quam nec mauris maximus blandit et in diam. Praesent semper viverra bibendum. Donec suscipit ullamcorper ipsum vitae suscipit. Sed porta, tellus eu suscipit mollis, purus sem euismod elit, et ultrices velit dolor a neque. Ut semper massa sit amet scelerisque laoreet. Curabitur neque nisi, volutpat sed auctor non, lobortis sit amet sem. Nullam placerat erat quis porta elementum. Ut accumsan massa a arcu ultrices lobortis. Nulla a quam at est efficitur volutpat nec non lacus. Duis et pellentesque ligula.

Example 7 - Create and Remove a SlideToggler

HTML
<div id="example7">
    Lorem ipsum dolor sit amet.....
</div>
Javascript
$("#example7_create").on("click", function(event){
    $("#example7").SlideToggler({
        title : "Example 7"
    });
});
$("#example7_remove").on("click", function(event){
    $("#example7").SlideToggler("remove");
});
Result
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et quam nec mauris maximus blandit et in diam. Praesent semper viverra bibendum. Donec suscipit ullamcorper ipsum vitae suscipit. Sed porta, tellus eu suscipit mollis, purus sem euismod elit, et ultrices velit dolor a neque. Ut semper massa sit amet scelerisque laoreet. Curabitur neque nisi, volutpat sed auctor non, lobortis sit amet sem. Nullam placerat erat quis porta elementum. Ut accumsan massa a arcu ultrices lobortis. Nulla a quam at est efficitur volutpat nec non lacus. Duis et pellentesque ligula.

Example 8 - Set defaults

Javascript
$.SlideTogglerSetup({
    autoHide      : true,
    speed         : 800,
    title         : "Custom Default Title",
    titleAlign    : "Left",
    toggler       : true,
    toolTipHide   : "Hide Me!",
    toolTipShow   : "Show Me!"
});

History

8 July 2015 - Version 1.1
3 July 2015 - Version 1.0

Comments and Ideas

Want to leave a comment or give me an idea? Email me or use the comments section below.