32 lines
4.5 KiB
HTML
32 lines
4.5 KiB
HTML
<!DOCTYPE html><html lang="en"><head><title>toggle</title></head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"><meta name="groc-relative-root" content=""><meta name="groc-document-path" content="toggle"><meta name="groc-project-path" content="core/admin/assets/js/toggle.js"><link rel="stylesheet" type="text/css" media="all" href="assets/style.css"><script type="text/javascript" src="assets/behavior.js"></script><body><div id="meta"><div class="file-path">core/admin/assets/js/toggle.js</div></div><div id="document"><div class="segment"><div class="comments"><div class="wrapper"><h1 id="-toggle-support"> Toggle Support</h1></div></div></div><div class="segment"><div class="code"><div class="wrapper"><span class="cm">/**</span>
|
||
<span class="cm"> * globals document,</span>
|
||
<span class="cm"> * jQuery</span>
|
||
<span class="cm"> */</span>
|
||
<span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">$</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="s2">"use strict"</span><span class="p">;</span>
|
||
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">ready</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span></div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="toggle-up-in-your-grill">Toggle Up In Your Grill</h2>
|
||
|
||
<p>Allows for toggling via data-attributes.</p>
|
||
|
||
<h3 id="usage">Usage</h3>
|
||
|
||
<pre><code> <nav>
|
||
<a href="#" data-toggle=".toggle-me">Toggle</a>
|
||
<ul class="toggle-me">
|
||
<li>Toggled yo</li>
|
||
</ul>
|
||
</nav>
|
||
</code></pre></div></div><div class="code"><div class="wrapper"> <span class="nx">$</span><span class="p">(</span><span class="s1">'[data-toggle]'</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||
<span class="kd">var</span> <span class="nx">toggle</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">data</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">);</span>
|
||
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">parent</span><span class="p">().</span><span class="nx">children</span><span class="p">(</span><span class="nx">toggle</span><span class="p">).</span><span class="nx">hide</span><span class="p">();</span>
|
||
<span class="p">});</span>
|
||
|
||
<span class="nx">$</span><span class="p">(</span><span class="s1">'[data-toggle]'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'click'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s1">'active'</span><span class="p">);</span>
|
||
<span class="kd">var</span> <span class="nx">toggle</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">data</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">);</span>
|
||
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">parent</span><span class="p">().</span><span class="nx">children</span><span class="p">(</span><span class="nx">toggle</span><span class="p">).</span><span class="nx">fadeToggle</span><span class="p">(</span><span class="mi">100</span><span class="p">).</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s1">'open'</span><span class="p">);</span>
|
||
<span class="p">});</span>
|
||
|
||
<span class="p">});</span>
|
||
<span class="p">}(</span><span class="nx">jQuery</span><span class="p">));</span></div></div></div></div></body></html> |