Как упростить этот код при использовании jquery ?
 

Собственно, вот код.

function onclicker(x) {
var content = document.getElementById('content');
var header = document.getElementById('header');
var prehed = document.getElementById('uppodheader');
if (x==1) {
prehed.style.visibility = "hidden";
content.style.width = "100%";
content.style.margin = "0";
header.style.width = "100%";
header.style.margin = "0";
header.style.height = "50px";
header.style.padding = "0";
header.style.borderRadius = "0px";
}

И вот так примерно он должен выглядеть.
Заранее спасибо за помощь

Вынеси стили из js в css файл, применяй их путем назначения css-класса и код станет коротким

Неужто непонятно?
Эти стили применяются ПО КЛИКУ.
В ксс не получится подставить

Ну извини, я же нуб. Ничего не понимаю. :D

<style>
#uppodheader{
  background: red;
}
#content{
  width: 80%;
  margin: 0 auto;
  background: blue;
}
#header{
  height: 20px;
  border-radius: 10px;
  background: orange;
}

.layout2 #uppodheader{
    visibility: hidden;
}
.layout2 #content{
    width: 100%;
    margin: 0;
}
.layout2 #header{
    border-radius: 0;
    width: 100%;
    height: 50px;
}
</style>

<script>
function onclicker(x) {
    var content = document.getElementById('content');
    var header = document.getElementById('header');
    var prehed = document.getElementById('uppodheader');
    if (x==1) {
        document.body.classList.add('layout2');
    }
}
</script>

<div id="uppodheader">uppodheader</div>
<div id="header">header</div>
<div id="content">content</div>
<button onclick="onclicker(1)">Жми сюды</button>

classList не работает в старых браузерах, но это легко решается.