Note that there are some explanatory texts on larger screens.

plurals
  1. POMultiple jQuery slidetoggles overlapping
    primarykey
    data
    text
    <p>So I am new to jQuery and have found a couple examples of slideToggle but all of them are overlapping. Here is my code so far:</p> <p>jQuery:</p> <pre><code>&lt;script src="jquery-1.9.1.js"&gt; &lt;/script&gt; &lt;script&gt; $ (document).ready(function(){ $("#about").click(function(){ $("#aboutp").slideToggle("medium"); }); }); &lt;/script&gt; &lt;script&gt; $(document).ready(function () { $("#discounts").click(function () { $("#discountsp").slideToggle("medium"); }); }); &lt;/script&gt; &lt;script&gt; $ (document).ready(function(){ $("#news").click(function(){ $("#newsp").slideToggle("medium"); }); }); &lt;/script&gt; </code></pre> <p>HTML:</p> <pre><code>&lt;div id="about"&gt;About Us&lt;/div&gt; &lt;div id="aboutp"&gt;this is us guys&lt;/div&gt; &lt;div id="discounts"&gt;Discounts&lt;/div&gt; &lt;div id="discountsp"&gt;Dicounts...blah blah blah blah blah&lt;/div&gt; &lt;div id="news"&gt;News&lt;/div&gt; &lt;div id="newsp"&gt;Here is the News!!&lt;/div&gt; </code></pre> <p>(the p at the end of about, discounts, and news are basically the information or paragraph divs that will get hidden and shown when the others get clicked)</p> <p>CSS:</p> <pre><code>#about,#discounts,#news { position: fixed; top: 100px; background-color:LightBlue; z-index: 11; } #about { right: 10px; padding-left: 50px; padding-right: 50px; padding-top: 5px; padding-bottom: 5px; text-align: center; } #discounts { right: 150px; padding-left: 50px; padding-right: 50px; padding-top: 5px; padding-bottom: 5px; text-align: center; } #news { right: 300px; padding-left: 50px; padding-right: 50px; padding-top: 5px; padding-bottom: 5px; text-align: center; } #newsp,#discountsp,#aboutp { top: 300px; right: 50px; position: fixed; display: none; } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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