Databases
StackOverflow2013
Postsdbo
POjQuery toggle/vertical slider effect with multiple Divs
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery toggle/vertical slider effect with multiple Divs
    text
    copied!<p>Actually, I am new to jQuery and I am writting a sample page with jQuery functions. In this page I am making use of toggle function. Please help me to get the intended effect. I am trying to get it but it is not working properly. The effect I am trying to apply is;</p> <ol> <li>There are 2 buttons on the page, say Button1 and Button2. </li> <li>There are 2 Divs, say Div1 and Div2.</li> <li>Initially both Divs are hidden and only 2 buttons are visible.</li> <li>If Button1 is clicked, Div1 should get toggle down and vice versa.</li> <li>If Div1 is in open state and Button2 is clicked, Div1 should go up slightly and Div2 should fall down.</li> </ol> <p>I have written some code with CSS applied on it. But I am not getting the sliding effect as it gives with only one Div.</p> <p>I have written Javascript as;</p> <pre><code>var IsPanelDown = false; var IsPanel2Down = false; $(document).ready(function() { // Expand Panel $("#open").click(function(){ if (IsPanel2Down == false) { $("div#panel2").slideUp("slow"); IsPanel2Down = false; } $("div#panel").slideDown("slow"); IsPanelDown = true; }); // Collapse Panel $("#close").click(function(){ $("div#panel").slideUp("slow"); IsPanelDown = false; }); // Switch buttons from "Log In | Register" to "Close Panel" on click $("#toggle a").click(function () { $("#toggle a").toggle(); }); $("#toggle2 a").click(function () { $("#toggle2 a").toggle(); }); $("#open1").click(function(){ if(IsPanelDown == false) { $("div#panel").slideUp("slow"); IsPanelDown = false; } $("div#panel2").slideDown("slow"); IsPanel2Down = true; }); // Collapse Panel $("#close1").click(function(){ $("div#panel2").slideUp("slow"); IsPanel2Down = false; }); }); </code></pre>
 

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