CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Zared H
Zared H

Reputation: 566

Toggle Width of a Div Using Jquery

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.

Upvotes: 1

Views: 3935

Answers (4)

Code Warrior
Code Warrior

Reputation: 438

you can use this

$("#boxToggle").click(function () {
    var width=$(".firstDiv").css( "width" );
    if (width=="80px") 
    {
        $(".firstDiv").css("width","120px");
    }
    else
    {
        $(".firstDiv").css("width","80");
    }

Upvotes: 0

Armfoot
Armfoot

Reputation: 4921

It can be as simple as detecting the width your div has when you click the button, and reacting appropriately:

$("#boxToggle").click(function() {
  var fd = $("#firstDiv");
  if(fd.css("width")!=="120px")
    fd.css("width", "120px");
  else
    fd.css("width", "80px");
});
#firstDiv {
  border: 1px solid black;
  padding: 10px;
  width: 80px;
  margin: 5px;
  display: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="boxToggle">Change Width</button>
<div id="firstDiv">
  <p>This is a paragraph.</p>
</div>

Through this you do not need to use global variables and toggle functions.

Upvotes: 0

ztukaz
ztukaz

Reputation: 11

firstDiv is a class not an id (# vs .) try: 

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

Upvotes: 0

Akshay
Akshay

Reputation: 14348

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>

Upvotes: 6

Related Questions