<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Create The Internet... &#187; jQuery</title>
	<atom:link href="http://createtheinternet.com/tag/jquery/feed/" rel="self" type="application/rss+xml" />
	<link>http://createtheinternet.com</link>
	<description>It&#039;s What I Do EVERY Day - Joseph Yancey</description>
	<lastBuildDate>Wed, 16 Jun 2010 05:07:37 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>jQuery &#8211; Slide up and down</title>
		<link>http://createtheinternet.com/2009-07-16/slide-up-and-down/</link>
		<comments>http://createtheinternet.com/2009-07-16/slide-up-and-down/#comments</comments>
		<pubDate>Fri, 17 Jul 2009 04:24:48 +0000</pubDate>
		<dc:creator>Joseph Yancey</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://createtheinternet.com/?p=63</guid>
		<description><![CDATA[// 
One of the greatest concepts in the history of programming is abstraction layers.  If you haven't used jQuery before, here is a quick example of how to make divs slide up and down.  This method requires NO manual javascript.  The power of abstraction is very evident here. Here is the main part of what [...]]]></description>
			<content:encoded><![CDATA[<p><script type="text/javascript">// <![CDATA[
             function blind(divid) {         jQuery('#'+divid).slideToggle("slow");         return false;    }
// ]]&gt;</script></p>
<p><!--  .blinder{      display:none;    } -->One of the greatest concepts in the history of programming is abstraction layers.  If you haven't used jQuery before, here is a quick example of how to make divs slide up and down.  This method requires NO manual javascript.  The power of abstraction is very evident here. Here is the main part of what you need:</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">&lt;script type=&quot;text/javascript&quot;&gt;
</div>
</li>
<li class="li1">
<div class="de1">function blind(divid) {
</div>
</li>
<li class="li1">
<div class="de1">jQuery('#'+divid).slideToggle(&quot;slow&quot;);
</div>
</li>
<li class="li1">
<div class="de1">return false;
</div>
</li>
<li class="li2">
<div class="de2">}
</div>
</li>
<li class="li1">
<div class="de1">&lt;/script&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&lt;style&gt; &nbsp; .blinder{ &nbsp; &nbsp; &nbsp;display:none; &nbsp; &nbsp;} &nbsp; &nbsp;&lt;/style&gt;</div>
</li>
</ol>
</div>
<p>The important part is the jQuery('#'.divid).slideToggle("slow").  The jQuery('#'.divid) part just means that we want to apply the next part to the html element that goes by the id passed to our function.  The slideToggle("slow") part tells jQuery that we want to run the effect slideToggle on whatever we are applying it to.  The return false part just means that we don't want to actually follow the link.  We just created a function to make this simpler on the links.</p>
<p>The &lt;style&gt;   .blinder{      display:none;    }    &lt;/style&gt; part just means to not display the divs that have the class name "blinder".</p>
<p>As far as the links and divs go, here is all you need:</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">&lt;a onclick=&quot;return blind('div1')&quot; href=&quot;#&quot;&gt;GO!&lt;/a&gt;
</div>
</li>
<li class="li1">
<div class="de1">&lt;div id=&quot;div1&quot;&gt;Slide 1&lt;/div&gt;</div>
</li>
</ol>
</div>
<p>The important part in the link is the onclick.   It just means to return the results of the blind function that we created earlier.  We are passing the id of the div that we want to show and hide.</p>
<p><a onclick="return blind('slider_div1')" href="#">GO!</a></p>
<div id="slider_div1" class="blinder">Slide 1</div>
<p><a onclick="return blind('slider_div2')" href="#">GO!</a></p>
<div id="slider_div2" class="blinder">Slide2</div>
]]></content:encoded>
			<wfw:commentRss>http://createtheinternet.com/2009-07-16/slide-up-and-down/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
