Hi, I'm a bit stuck on how to show/hide a button upon re-sizing the screen.

I was creating a website and wanted to expand/collapse a particular div, and also show/hide a toggle button that will be displayed when on a smaller screen, so that a user can click on it to expand a collapsed div containing paragraphs.

So far, I've achieved how to expand/collapse a div depending on the current screen size by writing codes in JavaScript, but I can't seem to figure out how to make it work for a button. What I tried to do was using a css() method to change the button's display value to ' ' on small screen, and 'none' on bigger screen, but it's not working. I'd appreciate some help on solving this.

EDIT: I scraped the idea of using css() method, and just used show() and hide() to accomplish it. But, I decided to leave this question here instead of deleting it, 'cause I still want to know how you would go about doing it if you were to use css() method to accomplish this task, in place of a simple show() and hide().

Below is part of the html containing collapsible div and a button:

<div class="col-xs-12 col-sm-5 col-md-5 col-lg-5" id="leftside">
            <div class="noCollapse">
            <h1>Title</h1>
            <p class="roles">text for roles</p>
            <img src="">
            </div><!-- end of noCollapse -->

            <div class="showHide"><!--expand/collapse div-->
            <p class="fulldescription">paragraph 1</p>
            <p class="fulldescription">paragraph 2</p>
            <img src="">
            </div><!-- end of showHide -->

            <button type="button" class="btn btn-primary">Show More</button><!-- expand/collapse .showHide -->

        </div> <!-- end of leftside -->

Below is part of the css:

button.btn.btn-primary{
    display: none;/*value will change via javascript. setting the value to "" removes this attribute.*/
}

Finally the JavaScript:

<script> // script for expand/collapse
    var expandCollapse = function(){
        if ( $(window).width() < 768 ) {
            $(function(){
                // add a class .collapse to a div .showHide
                $('.showHide').addClass('collapse');
                // set display: "" in css for the toggle button .btn.btn-primary
                $('button.btn.btn-primary').css('display', '');// removes display property to make it visible
            });
        }
        else {
            $(function(){
                // remove a class .collapse from a div .showHide
                $('.showHide').removeClass('collapse');
                // set display: none in css for the toggle button .btn.btn-primary  
                $('button.btn.btn-primary').css('display', 'none');// hides button display on bigger screen
            });
        }
    }
    $(window).resize(expandCollapse); // calls the function when the window first loads
</script>