How to change this jquery fiddle to have the first div open/active by default? <p>I found this fiddle (<a href="http://jsfiddle.net/m6aRW/109/" rel="nofollow">http://jsfiddle.net/m6aRW/109/</a>) that does exactly what I need it to do for me. However, how can I alter it so that #div1 is open on page load? Just using display:block keeps that div open even if you click the others.</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(function ($) { $('.showSingle').click(function () { var itemid = '#div' + $(this).attr('target'); //id of the element to show/hide. //Show the element if nothing is shown. if ($('.active').length === 0) { $(itemid).slideDown(); $(itemid).addClass('active'); //Hide the element if it is shown. } else if (itemid == "#" + $('.active').attr('id')) { $('.active').slideUp(); $(itemid).removeClass('active'); //Otherwise, switch out the current element for the next one sequentially. } else { $('.active').slideUp(function () { $(this).removeClass('active'); if ($(".targetDiv:animated").length === 0) { $(itemid).slideDown(); $(itemid).addClass('active'); } }); } }); });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>.targetDiv { display: none }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt; &lt;a class="showSingle" target="1"&gt;Div 1&lt;/a&gt; &lt;a class="showSingle" target="2"&gt;Div 2&lt;/a&gt; &lt;a class="showSingle" target="3"&gt;Div 3&lt;/a&gt; &lt;a class="showSingle" target="4"&gt;Div 4&lt;/a&gt; &lt;div id="div1" class="targetDiv"&gt;Lorum Ipsum1&lt;/div&gt; &lt;div id="div2" class="targetDiv"&gt;Lorum Ipsum2&lt;/div&gt; &lt;div id="div3" class="targetDiv"&gt;Lorum Ipsum3&lt;/div&gt; &lt;div id="div4" class="targetDiv"&gt;Lorum Ipsum4&lt;/div&gt;</code></pre> </div> </div> </p>