So i am trying to create a simple side-nav with flexbox... when the blue div.. is clicked I want the red div to change from a width "flex" of 0 to 1 which is "50%".... my code is below but I will also include a codepen...

HTML

<div class="container flex">
<div class="blue" onclick="clickBlue();"></div>
<div class="red"></div>
</div>

CSS

.container{background:rgba(0,0,0,.1); width:100%; height:100px;}
.blue{background:rgba(0,0,250,.2); flex:1; height:100px;}
.red{background:rgba(250,0,0,.4); flex:1; height:100px;}
.flex{display:flex; justify-content:center; align-items:center;}

JS

$(document).ready(function(){
function clickBlue(){ 
$(".red").css("flex","1");
}
});

So i am trying to create a simple side-nav with flexbox... when the blue div.. is clicked I want the red div to change from a width "flex" of 0 to 1 which is "50%".... my code is below but I will also include a codepen...

HTML

<div class="container flex">
<div class="blue" onclick="clickBlue();"></div>
<div class="red"></div>
</div>

CSS

.container{background:rgba(0,0,0,.1); width:100%; height:100px;}
.blue{background:rgba(0,0,250,.2); flex:1; height:100px;}
.red{background:rgba(250,0,0,.4); flex:1; height:100px;}
.flex{display:flex; justify-content:center; align-items:center;}

JS

$(document).ready(function(){
function clickBlue(){ 
$(".red").css("flex","1");
}
});

http://codepen.io/gebrutommy/pen/bwEGBv

• javascript
• jquery
• html
• css
• flexbox

Share Improve this question Follow asked Sep 12, 2016 at 15:14 user3657227user3657227 6711 silver badge77 bronze badges 2

• 1 Check your console, the function is undefined because the HTML is rendering before the JS is loaded. – APAD1 Commented Sep 12, 2016 at 15:18
• 1 Works fine if you put the function in the proper place jsfiddle/j08691/t757Lm6y – j08691 Commented Sep 12, 2016 at 15:18

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

The problem is that you are defining clickBlue inside on ready callback, hence its scope is not global, so you cannot reference it from the global scope. To solve this issue define the clickBlue in the global scope. without the document.ready function.

function clickBlue() {
  $(".red").css("flex", "1");
}

.container {
  background: rgba(0, 0, 0, .1);
  width: 100%;
  height: 100px;
}
.blue {
  background: rgba(0, 0, 250, .2);
  flex: 1;
  height: 100px;
}
.red {
  background: rgba(250, 0, 0, .4);
  flex: 0;
  height: 100px;
}
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container flex">
  <div class="blue" onclick="clickBlue();"></div>
  <div class="red"></div>
</div>

P.S. this solves your issue, but its better if you keep the document.ready callback and add a click listener on the .blue selector inside, without using html hooks.

$('.blue').on('click', clickBlue);

Your clickBlue function is inside another function and therefore not accessible in the document. Try adding it via jQuery in the same scope. For example, right after you declare the function, try:

$('.blue').on('click',clickBlue);

And remove it from the "onclick" of the HTML.

The problem is your function clickBlue is undefined.

You can instead add an event listener to blue div like this:

Code Snippet:

$(document).ready(function() {
  $(".blue").on("click", function() {
    $(".red").css("flex", "1");
  });
});

.container {
  background: rgba(0, 0, 0, .1);
  height: 100px;
}
.blue {
  background: rgba(0, 0, 250, .2);
  flex: 1;
  height: 100px;
}
.red {
  background: rgba(250, 0, 0, .4);
  flex: 0;
  height: 100px;
}
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container flex">
  <div class="blue"></div>
  <div class="red"></div>
</div>