slideDown() function behaving oddly
<p>firstly I should say I am fairly new to web development and teaching myself through tutorials and this site etc... I am trying to get videos displayed on this project with a nice smooth slide down (and up for hiding) as explained in this page: <a href="https://www.tutorialspoint.com/jquery/effect-slidedown.htm" rel="nofollow noreferrer">https://www.tutorialspoint.com/jquery/effect-slidedown.htm</a> There is even a demo at the end in which it works perfectly just as I'd like mine to do. But here is what I get when I try it:</p>
<p><a href="https://i.stack.imgur.com/HQHXU.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HQHXU.gif" alt="enter image description here" /></a></p>
<p>Here is my code:</p>
<p>html:</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;Test1&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;styles.css&quot;&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;script.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt; 
    &lt;div id=&quot;wrap&quot;&gt;
    
    &lt;p&gt;Nullam dictum felis&lt;span id=&quot;test&quot;&gt;Some text&lt;/span&gt; &lt;video id=&quot;videoTest&quot; width=&quot;350&quot; controls&gt;&lt;source src=&quot;mickey.mp4&quot; type=&quot;video/mp4&quot;&gt;&lt;/video&gt;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;

&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>JavaScript:</p>
<pre><code>$(document).ready(function(){

    $(&quot;#test&quot;).click(function(){
        if ($(&quot;#videoTest&quot;).css(&quot;display&quot;) == 'none') {

            $(&quot;#videoTest&quot;).slideDown(&quot;slow&quot;);
            $(&quot;#videoTest&quot;).css(&quot;display&quot;, &quot;inline&quot;);
        
        } else {

            $(&quot;#videoTest&quot;).slideUp(&quot;slow&quot;);
            $(&quot;#videoTest&quot;).css(&quot;display&quot;, &quot;none&quot;);
        }
    })
});
</code></pre>
<p>CSS:</p>
<pre><code>#wrap{
    margin: 100px auto;
    width: 350px;
}

p {
    line-height: 2em;   
}

#test{
    color: blue;
    cursor: pointer;    
}

#videoTest{
    display: none;
}
</code></pre>
<p>I've cut some of the text for Stack OverFlow but the rest of the code is the same. My problem of course is that the video doesn't just slide down, it also slides horizontally which I don't want and the controls appear immediately which I can live with but also ideally I would not want. Also, the slideUp function doesn't work at all. Any help appreciated. P</p>
<p>----------------------------------------------------------EDIT---------------------------------------------------------------</p>
<p>I have tried wrapping the video in a div and applying the slideDown() method to the div instead of the video itself and that has solved both problems (the unwanted horizontal sliding and the fact that it wasn't working with SlideUpp) but unfortunately it works very erratically only being triggered on some click, I would say one time out of five.</p>