Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to add Sliding affect to Jquery Top Panel
    primarykey
    data
    text
    <p>I am using a top Panel Drop Down. Something similar to this <a href="http://www.yootheme.com/tools/extensions/yootoppanel" rel="nofollow">http://www.yootheme.com/tools/extensions/yootoppanel</a></p> <p>Initially it was in mootools. But i was having issues in IE8. So i thought to change it to Jquery. I have made the slidedown and slide up functionality. But i am unable to add the sliding affect. As far as coding is concerned, I have called a function on click event of the button. Which adds height, position etc when sliding down and removes it while sliding up. </p> <pre><code>function toggle(articleheight,height) { if(height &lt; 0){ slideIn(articleheight); } else{ slideOut(articleheight); } } function slideIn(articleheight){ jQuery(".panel").css("margin-top",0); jQuery(".panel-wrapper").css("height",articleheight); } function slideOut(articleheight){ jQuery(".panel").css("margin-top",-articleheight); jQuery(".panel-wrapper").css("height",0); } </code></pre> <p>My HTML code</p> <pre><code>&lt;div id="toppanel" class="toppanel"&gt; &lt;div class="panel-container"&gt; &lt;div class="panel-wrapper"&gt; &lt;div class="panel"&gt; &lt;div class="content"&gt; MY CONTENT &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="trigger" style="&lt;?php echo $css_left_position ?&gt;"&gt; &lt;div class="trigger-l"&gt;&lt;/div&gt; &lt;div class="trigger-m"&gt;Panel&lt;/div&gt; &lt;div class="trigger-r"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Please help</p>
    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