StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery - Open div, close another
text
Body
copied!<p>I have been trying to make a script that would open a div onClick, but also close the other div if it's open (The page has 2 divs you're suppose to be able to switch between).</p> <h2>Here's my script <em>(I found)</em>:</h2> <p><a href="http://jsfiddle.net/J9vdr/1/" rel="nofollow">http://jsfiddle.net/J9vdr/1/</a> </p> <pre><code>$(document).ready(function () { var expanded = false; var collapsed = true; $(".expanderHead").click(function () { if (expanded == true) { expanded = false; collapsed = true; } else { expanded = true; collapsed = false; } if (expanded == true) { $(".expanderSign").html("-"); $(".expanderContent").slideToggle(); } if (collapsed == true) { $(".expanderSign").html("+"); $(".expanderContent").slideToggle(); } }); }); </code></pre> <h2>Here's what I've tried:</h2> <p><a href="http://jsfiddle.net/YqEVZ/2/" rel="nofollow">http://jsfiddle.net/YqEVZ/2/</a></p> <pre><code>$(document).ready(function () { var expanded = false; var collapsed = true; $(".infoexpanderHead1").click(function () { if (expanded == true) { expanded = false; collapsed = true; } else { expanded = true; collapsed = false; } if (expanded == true) { $(".infoexpanderSign1").html("-"); $(".infoexpanderContent1").slideToggle(); $(".infoexpanderContent2").slideToggle(); } if (collapsed == true) { $(".infoexpanderSign1").html("+"); $(".infoexpanderContent1").slideToggle(); $(".infoexpanderContent1").slideToggle(); } }); $(document).ready(function () { var expanded = true; var collapsed = true; $(".infoexpanderHead2").click(function () { if (expanded == true) { expanded = false; collapsed = true; } else { expanded = true; collapsed = false; } if (expanded == true) { $(".infoexpanderSign2").html("-"); $(".infoexpanderContent2").slideToggle(); } if (collapsed == true) { $(".infoexpanderSign2").html("+"); $(".infoexpanderContent2").slideToggle(); } }); }); </code></pre> <p>There should be different content in each <code>infoexpandercontent</code>. <strong>If 'Content 1' is expanded, collapse 'Content 2'</strong> is the idea, but <strong>I'm very new to jQuery and Javascript</strong>, I've done mostly HTML/CSS.</p> <p>Also, could it be possible to add a CSS class to the 'expanded' span? I mean like there would appear a <code>border-bottom</code> on the span, which's content is expanded.</p> <p>I want it to have a <strong>smooth transition</strong>, not just change the content roughly.</p> <p>Ask me if I was too unclear!</p> <p>Thank you, Any help is appreciated!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload