Slide Toggle - YUI 2 [V5]

This is a script I created that shows/hides content when you click a button, on page load the script hides the targeted element and generates the button for you. It uses YUI (YAHOO! User Interface 2), which is already loaded with Squarespace (so no need to load another library e.g. jQuery or Prototype). It is designed to be extremely simple to set up! (Note: the script includes the YUI 2 button module which is not loaded by Squarespace)

How to use it:

1) Download the script (right click -> save as) and upload it to file storage.

2) Next to your script in file storage, click url and copy the link shown.

3) Add the script to your extra header code in code injection e.g.

<script type=”text/javascript” src=”THE-LINK-YOU-COPIED-IN-STEP-2”></script>

4) [OPTIONAL] Configure options, paste the following code BELOW the script tags in step three and then change as required:

<script type="text/javascript">
//Set options -- Call the main javascript before this!
    slideToggleTiming = 0.8; //set default transition time
    slideToggleButtonLabel = 'Push'; //set default button text
    slideToggleAnim = 'Both'; //'Down' or 'Both'
    slideToggleDivClass = 'slideToggle'; // Class of elements you wish to target
    slideToggleButtonCSS = 1; // 1 = Yes, 0 = No - File may change without notice
</script>

5) To use the script, add the class ‘slideToggle’ (or whatever you changed it to in the options) to any element e.g.

<div class=”slideToggle”>YOUR HIDDEN CONTENT HERE</div>

6) You can override particular elements features by adding attributes (all available attributes are shown here) e.g.

<div class=”slideToggle” data-stTime=”2” data-stLabel=”Hello!” data-stAnim=”Down”>YOUR HIDDEN CONTENT HERE</div>

7) Both the Button itself and the revealed content can be styled. Let’s start with the content. Add this to your Custom CSS:

.slideToggle { 
    margin:10px 0;
    padding: 5px 10px;      
    background:#eee;        
    border-radius: 8px;             
    font-size:18px;         
    text-align:center;  
}   
.slideToggle p {        
    margin-top:20px;    
} 

For the button, add CSS which targets: .yui-button span button

I leave the rest up to you!