Target element outside onclick event? - html

Question

I'm doing a page for someone. I toggled the visibility of a div with a checkbox however, he wants to change the height of the header which comes before the content div which has the onclick event. Could anyone help me out? either css or js/jquery.
What I want:
checkbox off: div hidden & header height 412px.
checkbox checked: div showed & header height 212px.
header {
width:100%;
height:412px;
text-align:center;
background:#1f1f1f;
margin: 0;
padding: 0;
border: 0;
position:relative;
}
#wrapper td {
vertical-align: middle;
text-align: center;
}
#wrapper td img {
position: absolute;
top: 50%;
left: 50%;
width: 736px;
height: 105px;
margin-top: -52px; /* Half the height */
margin-left: -368px; /* Half the width */
}
div.content {
background:#ebebec;
position:relative;
top:100px;
color: white;
width: 100%;
text-align: center;
font-family: BlueHighway, Arial Black, sans-serif;
top:0;
}
div.content label {
display: block;
width:80px;
height:88px;
background:url(http://i.imgur.com/Buvp49A.png) no-repeat;
background-position: center top;
margin:0 auto;
margin-bottom:30px;
}
div.content label:hover {
cursor: pointer; background-position: center bottom;
}
div.button {
display:block;
position:relative;
top:-67px;
padding-top:22px;
background:url(http://i.imgur.com/Gf3QAxt.png) no-repeat;
background-position: center top;
}
input.toggle ~ div.description {
height: 0px;
overflow: hidden;
transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)
}
input.toggle:checked ~ div.description { height: 530px; }
input.toggle:checked + label { background-position: center bottom; }
input.toggle { display: none; }
<header>
<table id="wrapper">
<tr>
<td><img src="http://i.imgur.com/vE3KBOv.png" alt="Santos#imvu"/></td>
</tr>
</table>
</header>
<div class="content">
<div class="button">
<input type="checkbox" id="punch" class="toggle">
<label for="punch"></label>
<div class="description">
<img src="http://i.imgur.com/8sY0E5c.gif" style="max-width:100%;height:auto" alt="bla">
</div>
</div>
</div>
Demo

Answer 1

Something like this?
I've set the initial height to 212px and added a new class to CSS header.expand where you set the height to 412px. After that you trigger the click() event for the checkbox in jQuery and toggle the expand class with toggleClass(...)
SNIPPET
$('#punch').click(function() {
$('header').toggleClass('expand');
});
html {
background: grey;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
}
body {
background: #ebebec;
width: 926px;
margin: 0 auto;
padding: 0;
color: grey;
}
header {
width: 100%;
height: 212px;
text-align: center;
background: #1f1f1f;
margin: 0;
padding: 0;
border: 0;
position: relative;
transition: height .8s ease-out;
}
header.expand {
height: 412px;
}
#wrapper td {
vertical-align: middle;
text-align: center;
}
#wrapper td img {
position: absolute;
top: 50%;
left: 50%;
width: 736px;
height: 105px;
margin-top: -52px;
/* Half the height */
margin-left: -368px;
/* Half the width */
}
.image {
width: 500px;
height: 500px;
margin: 0 auto;
position: relative;
margin-bottom: 94px;
}
footer {
width: 100%;
text-align: center;
padding: 20px 0;
font-size: 12px;
background: #1f1f1f;
margin-top: 28px;
color: #fff;
clear: both;
}
a {
color: #0082ff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
p {
width: 870px;
margin: 0 auto;
}
div.content {
background: #ebebec;
position: relative;
top: 100px;
color: white;
width: 100%;
text-align: center;
font-family: BlueHighway, Arial Black, sans-serif;
top: 0;
}
div.content label {
display: block;
width: 80px;
height: 88px;
background: url(http://i.imgur.com/Buvp49A.png) no-repeat;
background-position: center top;
margin: 0 auto;
margin-bottom: 30px;
}
div.content label:hover {
cursor: pointer;
background-position: center bottom;
}
div.button {
display: block;
position: relative;
top: -67px;
padding-top: 22px;
background: url(http://i.imgur.com/Gf3QAxt.png) no-repeat;
background-position: center top;
}
input.toggle ~ div.description {
height: 0px;
overflow: hidden;
transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)
}
input.toggle:checked ~ div.description {
height: 530px;
}
input.toggle:checked + label {
background-position: center bottom;
}
input.toggle {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<header>
<table id="wrapper">
<tr>
<td>
<img src="http://i.imgur.com/vE3KBOv.png" alt="Santos#imvu" />
</td>
</tr>
</table>
</header>
<div class="content">
<div class="button">
<input type="checkbox" id="punch" class="toggle">
<label for="punch"></label>
<div class="description">
<img src="http://i.imgur.com/8sY0E5c.gif" style="max-width:100%;height:auto" alt="bla">
</div>
</div>
</div>