Autor Zpráva
richardbb
Profil
Dobry vecer.

Mozem poprosit o radu? Potrebujem vytvorit rozbalovaci obsah (text s obrazkami) po kliknuti na odkaz pre tri stlpce. Musi to byt validne a prijatelne pre SEO, takze nie flash a pod. Obrazky ako by to malo vypadat su nizsie.

Neviete mi prosim poradit ako by som to mohol vyriesit?

Dakujem za ochotu,

Richard

Obrazok pred rozbalenim
Odkaz
Obrazok po rozbaleni
Odkaz
Radek Cvek
Profil
každý sloupec bude div s bílým pozadím a v něm div s class display: none a onClick změna barvy pozadí + display: block
richardbb
Profil
Radek Cvek:
... ale ja potrebujem aby ten obsah bol skryty, cize paticka stranky tesne pri troch stlpcoch a az po kliknuti sa medzi nimi zobrazi vysunuty obsah.

Dakujem za ochotu a cas.
Radek Cvek
Profil
Já jsem to tak myslel taky, divy budou skryté (display: none;) a po kliknutí se objeví (display: block;).
Zkusil jsem narychlo - asi to nebude nejlepší řešení, ale jasně ukazuje princip:
<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---  
richardbb
Profil
Radek Cvek:
Bozkavam zem po ktorej chodite!!! Je to presne to co potrebujem :) Keby som bol kralom pribalim dceru a pol kralovstva za tlacitko, ktore vysunuty text skryje.

Velmi dakujem,

Richard
panther
Profil
Radek Cvek:
super, a lidé s vypnutým JS? S pevně nastaveným display: none to není správné řešení. JavaScriptem se má skrývat defaultně viditelné, nikoliv obráceně.
Radek Cvek
Profil
panther:
Tak nevím - potom to jedině předávat v url - nebo jak by se to pro ty, co mají vypnutý javascript dělalo?
Chamurappi
Profil
Reaguji na Radka Cveka:
Nastav skriptem při načítání třídu pro <html> (tedy přiřaď něco do document.documentElement.className) a skryj příslušné elementy stylopisem pouze při přítomnosti dotyčné třídy.
Radek Cvek
Profil
Chamurappi:
To přece neřeší vypnutý javascript nebo to špatně chápu? Jak bude vypadat ten odkaz? Čím se předá to, co se má skrýt a co ne?
panther
Profil
Radek Cvek:
místo inline zápisů display: none (ř. 51-53) v příkladu v [#4] se bude scriptem přiřazovat třída (např. „js“) k html a ve stylopisu pak bude následující:
.js #skryte1, .js #skryte2, .js #skryte3 {display: none}

Pokud nebude přítomen JS, nenastaví se k html třída „js“ a nic se neskryje - všechno zůstane viditelné.
Radek Cvek
Profil
panther:
Už mi to došlo, ale zase aby bylo všechno viditelné nebyl záměr, podle mě by se to muselo předat v url a pak by se to vyhodnocovalo ve skriptu. A v podstatě udělal všechno dvakrát (vypnutý/zapnutý js).

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: