Display none being added since removing jquery ui script
<p>I'm pretty new to JavaScript, this is one of my first scripts.</p>

<p>basically i am trying to create a script that turns a grid based news list into a list based news list. i got it all working great when had both </p>

<pre><code>&lt;script src="http://code.jquery.com/jquery-1.8.3.js"&gt;&lt;/script&gt;
&lt;script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"&gt;&lt;/script&gt;
</code></pre>

<p>but i have removed the ui script as i dont really need it (i think)</p>

<p>and now my script isn't functioning properly. My Script is </p>

<pre><code>//Javascript Start 

//SETTINGS
var settings = {
    //Header Slider Settings
    listBtn: 'input.toggle',
    listItem: '.wrapper ul',
    listStyleOne: 'listNews-tiled',
    listStyleTwo: 'listNews-list',
    fadeSpeed: 300
}

function NewsListSwitcher() {
    $(settings.listBtn).click(function () {
        //If News List has a certian class
        if ($(settings.listItem).hasClass(settings.listStyleOne)) {
            //Fade Out and remove Class
            $(settings.listItem).fadeOut(settings.fadeSpeed,
                function () {
                    $(settings.listItem).removeClass(settings.listStyleOne);
                }
            );
            //Add Class and Fade In
            $(settings.listItem).addClass(settings.listStyleTwo,
                function () {
                    $(settings.listItem).fadeIn(settings.fadeSpeed);
                }
            );
            //Change background Position Of List Button
            $(settings.listBtn).css("background-position","bottom");
        }
        else {
            //Fade Out and remove class
            $(settings.listItem).fadeOut(settings.fadeSpeed,
                function () {
                    $(settings.listItem).removeClass(settings.listStyleTwo);
                }
            );
            //Add Class and Fade In
            $(settings.listItem).addClass(settings.listStyleOne,
                function () {
                    $(settings.listItem).fadeIn(settings.fadeSpeed);
                }
            );
            //Change background Position Of List Button
            $(settings.listBtn).css("background-position","top");
        }
    });
}
//Javascript End
</code></pre>

<p>my html is just a basic list</p>

<pre><code>&lt;div class="wrapper"&gt;
    &lt;input type="submit" class="toggle" value=""&gt;
    &lt;hr /&gt;
    &lt;ul class="listNews-tiled"&gt;
        &lt;li&gt;item&lt;/li&gt;
        &lt;li&gt;item&lt;/li&gt;
        &lt;li&gt;item&lt;/li&gt;
        &lt;li&gt;item&lt;/li&gt;
        &lt;li&gt;item&lt;/li&gt;
        &lt;li&gt;item&lt;/li&gt;
        &lt;li&gt;item&lt;/li&gt;
        &lt;li&gt;item&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>what is happening is when i click my icon, the script removed listNews-tiled class and adds listNews-List class, but it also adds display block: none; which i dont want.</p>

<p>If you could help that would be amazing.</p>

<p>Link to Preview
<a href="http://www.psykestudios.co.uk/News%20List-Grid%20selector/" rel="nofollow">http://www.psykestudios.co.uk/News%20List-Grid%20selector/</a></p>
