Rozbalovaci obsah po kliknuti na odkaz

<script>
function show(co)
  {
  document.getElementById(co).style.display='block';  
  if (co=='skryte1') 
    {
    document.getElementById('prvni').style.backgroundColor='gray';
    document.getElementById('druhy').style.backgroundColor='white';
    document.getElementById('treti').style.backgroundColor='white';
    document.getElementById('skryte2').style.display='none'; 
    document.getElementById('skryte3').style.display='none'; 
    }
  if (co=='skryte2') 
    {
    document.getElementById('prvni').style.backgroundColor='white';
    document.getElementById('druhy').style.backgroundColor='gray';
    document.getElementById('treti').style.backgroundColor='white';
    document.getElementById('skryte1').style.display='none'; 
    document.getElementById('skryte3').style.display='none'; 
    }
  if (co=='skryte3') 
    {
    document.getElementById('prvni').style.backgroundColor='white';
    document.getElementById('druhy').style.backgroundColor='white';
    document.getElementById('treti').style.backgroundColor='gray';
    document.getElementById('skryte1').style.display='none'; 
    document.getElementById('skryte2').style.display='none'; 
    }
  }
 
</script>
<div id="prvni" style="float: left; background: white; width: 200px;">
<h2>Headline box</h2>
<p>Ptají se často lidé. Inu jak by vypadaly - jako běžné pouťové balónky střední velikosti, tak akorát nafouknuté. Červený se vedle modrého a zeleného zdá trochu menší, ale to je nejspíš jen optický klam, a i kdyby byl skutečně o něco málo menší, tak vážně jen o trošičku.
<a href="javascript:show('skryte1')">klikni...</a>
</p>
</div> 
<div id="druhy" style="float: left; background: white; width: 200px;">
<h2>Headline box</h2>
<p>Ptají se často lidé. Inu jak by vypadaly - jako běžné pouťové balónky střední velikosti, tak akorát nafouknuté. Červený se vedle modrého a zeleného zdá trochu menší, ale to je nejspíš jen optický klam, a i kdyby byl skutečně o něco málo menší, tak vážně jen o trošičku.
<a href="javascript:show('skryte2')">klikni...</a>
</p>
</div> 
<div id="treti" style="float: left; background: white; width: 200px;">
<h2>Headline box</h2>
<p>Ptají se často lidé. Inu jak by vypadaly - jako běžné pouťové balónky střední velikosti, tak akorát nafouknuté. Červený se vedle modrého a zeleného zdá trochu menší, ale to je nejspíš jen optický klam, a i kdyby byl skutečně o něco málo menší, tak vážně jen o trošičku.
<a href="javascript:show('skryte3')">klikni...</a>
</p>
</div> 
<div style="clear: both;"></div> 
<div id="skryte1" style="background: gray; display: none; width: 600px;">Stuha, kterou je každý z trojice balónků uvázán, aby se nevypustil. Očividně je uvázaná dostatečně pevně, protože balónky skutečně neucházejí. To ale není nic zvláštního. Překvapit by však mohl fakt, že nikdo, snad krom toho, kdo balónky k obloze vypustil, netuší, jakou má ona stuha barvu.</div>
<div id="skryte2" style="background: gray; display: none; width: 600px;">Je totiž tak lesklá, že za světla se v ní odráží nebe a za tmy zase není vidět vůbec. Když svítí slunce tak silně jako nyní, tak se stuha třpytí jako kapka rosy a jen málokdo vydrží dívat se na ni přímo déle než pár chvil. Jak vlastně vypadají ony balónky?.</div>
<div id="skryte3" style="background: gray; display: none; width: 600px;">Ptají se často lidé. Inu jak by vypadaly - jako běžné pouťové balónky střední velikosti, tak akorát nafouknuté. Červený se vedle modrého a zeleného zdá trochu menší, ale to je nejspíš jen optický klam, a i kdyby byl skutečně o něco málo menší, tak vážně jen o trošičku. Vítr skoro nefouká a tak by se na první pohled mohlo zdát, že se balónky snad vůbec nepohybují.</div>
<hr>
---PATIČKA---  

.js #skryte1, .js #skryte2, .js #skryte3 {display: none}