CODEWITHSUNDEEP
javascriptjquerycssasp.net-mvctwitter-bootstrap
Pixelord
Pixelord

Reputation: 641

How can I change the width of the container div in bootstrap onClick?

I am working on Asp.Net MVC project. In my _Layout.cshtml I am using container class for my main container div:

    <div class="container">
        @RenderBody()
        <hr />
        <footer>
        </footer>
    </div>

However, for one of my page I have a button that would allow expand the size of the container to full screen width and back (user will be able to toggle the width from default to full screen width and vice versa).

the container-fluid class kind of doing the same think, but I need to to it on-the-fly on button click. How can I do that? Moreover, is there any way to change the width only for the specific view not effecting other pages (since the container is defined in _layout.cshtml it would effect other views as well)?

Upvotes: 0

Views: 1386

Answers (2)

Pixelord
Pixelord

Reputation: 641

After doing some experiment, I found that following code just works fine for me:

document.getElementById("elementId").className = "new_css_class_name";

It force the document update the view instantly, which was a problem in case of above presented solution.

Upvotes: 0

A.O.
A.O.

Reputation: 3763

For all containers:

$("#myButton").on('click', function(){
    $(".container").toggleClass("container-fluid");
});

For only the parent .container of the button clicked

$("#myButton").on('click', function(){
    $(this).closest(".container").toggleClass("container-fluid");
});

You can swap out container-fluid for a class of your choice if you want to set it to a specific style outside of the provided bootstrap classes.

Upvotes: 1

Related Questions