Q:

Css transition not applying in child elements

I'm currently facing the following problem.
I have a <section> element that has some <div> as children.
The height of the <section> is set as a percentage of the parent div, and the <div>'s height is also set as a percentage of the <section>.
I'm using Jquery to add a class to the <section> in order to transition between two heights. The problem is that the children aren't updating their height.
I don't want to refresh the css using ye olde display: none and removeAttr("style") trick since I want the transition to be applied to the children too.
I've made a couple of sketches to help understand the problem.
Initial state

After the transition

EDIT

The <section> tag has the following classes at initial state:
fullWidth halfHeight expandableTransition
.fullWidth {
  width: 100%;
}

.halfHeight {
  height: 48%;
}

.expandableTransition {
  -webkit-transition: height 1s; /* Safari */
  transition: height 1s;
}

The CSS for the children <div> is:
.myDiv {
  border: 1px solid;
  height: 82%;
  width: 300px;
  display: inline-block;
  vertical-align: middle;
}

The class added by Jquery in order to transition to the new height is as simple as:
.expandedSection {
  height: 96%;
}

The Jquery code that adds the class is the following:
function expandSection() {
    $("#prioritySection").toggleClass("expandedSection");
}

A:

i think you are using bit more classes for animation 
i hope this helps
fiddle goes here https://jsfiddle.net/rameezrami/1axvcoeh/3/
<html>
<head>
<style>
.fullWidth {
  width: 100%;background: green;
  height: 48%;
}

.myDiv {
  border: 1px solid;
  height: 82%;
  width: 300px;
  display: inline-block;
  vertical-align: middle;
  background: red;
}

.expandedSection {
  height: 96%;
  -webkit-transition: height 1s; /* Safari */
  transition: height 1s;
}
</style>
</head>
<body>
<section class="fullWidth">

<div class="myDiv"></div>
<div class="myDiv"></div>
</section>
<input type="button" onclick="expandSection();" value="click to expand">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function expandSection() {
    $(".fullWidth").toggleClass("expandedSection");
}
</script>
</body>
</html>

