Toggle Slider

Before we begin here are some terms that you should become familiar with!

click()

Binds an event handler to the click function which will trigger an action when the element is bound to is clicked.

slideToggle()

Displays or hides the targeted elements with a sliding motion.

What You'll Be Learning

You will be learning to add a toggle button to your site.

Toggle buttons can be used to make lengthy content minamized until the user wants to read it.

How to execute.

What should you know?

To begin with the toggel button you must first make sure you have aquired all of the proper scripts given to you in the first lesson.

Steps

First you will make a tag such as h1 for my example with a class of slide. From there you will build a button with a id of toggleBtn

From there you will write you scripts and styles like the ones listed two columns down.

After that you should have a working toggle button and be able to show and hide text at the click of a button!

Example

Slide Toggle Text

Code Required

HTML Markup

<h1 id="slide"> Slide Toggle Text </h1>
<input type="button" id="toggleBtn" value="toggle"/> 

CSS Markup

	#toggleBtn{
		text-align:center;
		width:100px;
		height:50px;
		font-size:25px;
		margin-left: 590px;
    margin-top: 20px;
    margin-bottom:10px;
	}

Javascript Markup

$(document).ready(function() {  //sets the document ready function
  $('#toggleBtn').click(function(){ //adds a click function to element with id of toggleBtn
  $('#slide').slideToggle('slow'); //adds a slidetoggle to #slide
  });
});//end document