Override CSS set by show()
<p>I have a div that am hiding and displaying using jQuery. My function code works properly apart from when I change the div css into <code>display: inline-block;</code> to make the div lie side by side another div. </p>

<p>When I click the hide button, the div hides but on clicking the show button, the div does not show. Using Google chrome I inspected the element and noticed this is because jQuery is adding CSS to the div which is <code>display: block;</code>. This is making my div not display and is affecting the animation. </p>

<p>Any idea how I can override the CSSjQuery is adding and make jQuery add <code>display: inline-block</code> instead of <code>display: block;</code> without affecting the animation? My code is here
CSS:</p>

<pre><code>#taskList-right {
    width: 48%;
    background-repeat: no-repeat;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    clear: both;
    display: inline-block;
    padding: 5px 5px 5px 5px;
    float: right;
    margin-right: 7px;
    overflow-wrap: break-word;
}
</code></pre>

<p>jQuery:</p>

<pre><code>$("#package_buttn").click(function () {
    if ($("#taskList-right").is(":hidden")) {
        console.log('passed here');
        // $("#taskList-right").slideDown();//this function should slide the div down but is commented for bug tracking.
        $("#taskList-right").show();
    } 
    else {
        $("#taskList-right").slideUp();
    }
});
</code></pre>
