Toggle Width of a Div Using Jquery

Zared619 Published at Dev

Zared619

I want to toggle the width of a div using a button. I'm not sure how to properly use an if-else statement to check the CSS, and I'm also not clear on the syntax.

Let's assume that I have the following:

CSS

.firstDiv {
    border:1px solid black;
    padding:10px;
    width: 80px;
    margin:5px;
    display:relative;
}

HTML

<button id="boxToggle">Change Width</button>
<div class="firstDiv">
    <p>This is a paragraph.</p>
</div>

JavaScript

$("#boxToggle").click(function () {
    $("#firstDiv").css("width", "120px");
});

Right now, the JavaScript would only change the width once and not go back, but this still isn't working and I'm assuming that my syntax is wrong.

A JSFiddle of the above can be found at the link.

https://jsfiddle.net/647ye1pk/

Any help is appreciated.

Akshay

You can use toggleClass to achieve this effect

//I need an "if-else" statement in here, but I'm not sure how to use css as a condition
$("#boxToggle").click(function () {
    $(".firstDiv").toggleClass('largeWidth');
});

.firstDiv {
    border:1px solid black;
    padding:10px;
    width: 80px;
    margin:5px;
    display:relative;
}

.largeWidth{
    width:120px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="boxToggle">Change Width</button>
<div class="firstDiv">
    <p>This is a paragraph.</p>
</div>

And if you don't want to use the toggleClass method try this

//I need an "if-else" statement in here, but I'm not sure how to use css as a condition
click = 0;
$("#boxToggle").click(function () {
    if (click == 0) {
        $(".firstDiv").css("width", "120px");
        click = 1;
    } else {
        $(".firstDiv").css("width", "80px");
        click = 0;
    }
});

.firstDiv {
    border:1px solid black;
    padding:10px;
    width: 80px;
    margin:5px;
    display:relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button id="boxToggle">Change Width</button>
<div class="firstDiv">
    <p>This is a paragraph.</p>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.