Avautuvat boksit

Tämä on esimerkkisivu siitä, kuinka taulukoita käyttäen luodaan sivustolle avattavia laatikoita. Jokainen laatikko on todellisuudessa yksisarakkeinen taulukko, joka sisältää kaksi riviä. Myöhemmin lisättävä koodi tekee otsikkoriveistä klikattavia ja piilottaa otsikkosolun alapuolella olevan rivin.

Otsikkosolun alla olevan sisällön näet klikkaamalla otsikkosolua. Myöhemmin lisätty koodi myös lisää otsikkosolulle nuolen, joka kertoo, onko alla oleva sisältö näkyvissä vai piilotettu.

Jos selain ei tue javascriptiä, tällöin kaikki laatikot näkyvät automaattisesti avattuina.

 

OTSIKKO 1

Tämä on sisältöä, joka näkyy ensimmäisen otsikon alla. Kaikki tässä solussa oleva sisältö muutetaan myöhemmin sellaiseksi, että se joko näytetään tai piilotetaan klikkaamalla ylläolevaa solua.

Tähän soluun voi myös lisätä kuvia tai mitä tahansa haluamaansa sisältöä.

 

OTSIKKO 2
Tässä on toisen otsikon alla oleva sisältö.

 

OTSIKKO 3
Tässä hieman lisää tekstiä.

 

Miten tämä on tehty?

1)  Loin uuden sivun sivupohjalla 1.02.
2)  Valitsin palstoitetun portlet contentin.
3)  Klikkasin ikonia taulukon luomiseksi.
4)  Taulukolle laitoin seuraavat asetukset:
    Rivit: 2
    Sarakkeet: 1
    Rajan paksuus: 0
    Leveys: 100%
    Solujen väli: <tyhjä>
    Solujen sisennys <tyhjä>
5)  Klikkasin OK

Nyt taulukko on luotu ja jatkan seuraavasti:
6)  Ensimmäiselle riville kirjoitin: OTSIKKO 1
7)  Toiselle riville kirjoitan kaiken sisällön, jonka haluan näkyvän otsikkoa klikkaamalla

Jatkan vaiheita 3-7, kunnes olen saanut haluavani määrän klikattavia taulukoita aikaan. Tämän jälkeen on aika määritellä klikattavat otsikko solut sekä valita niille teeman mukaiset värit seuraavasti:
8)  Klikkaan otsikkosolua oikealla näppäimellä ja valitsen: Solu -> Solun omainaisuudet
9)  Solulle valitsen seuraavat asetukset:
    Solun tyyppi: ylätunniste
    Horisontaali kohdistus: vasemmalle
    Tausta väri: valitsen sopivan värin
10) Klikkaan OK
11) Alemmalle solulle valitsen myös Solu --> Solun ominaisuudet --> Valitsen eri värin --> Klikkaan ok
Toisten jokaisen taulukon kohdalle vaihteet 8-10

Tämän jälkeen lisään koodin, joka tekee otsikkoriveistä klikkailtavan sekää lisää "nuolipainikkeet" otsikoiden jälkeen sekä muuttaa hieman muotoilua. Eli seuraavasti:
12) Klikkaat Koodi-ikonia
13) Menen ihan koko tekstiosion loppuun, johon copy-pastetan seuraavan koodin:

<script>
<!-- Tehdaan otsikot klikkailtavaksi -->
$('div.portlet-body th').click(function(){$(this).closest('tr').next().toggle('slow');});
$('div.portlet-body th').parent('tr').next().hide();
<!-- Lisataan nuolet -->
$('div.portlet-body th').append($('<span/>', {'class':'iconright glyphicon glyphicon-chevron-right',}));
$('div.portlet-body th').click(function(){$(this).find('span').toggleClass("glyphicon-chevron-down glyphicon-chevron-right");});
</script>
<!-- CSS-muotoilu taulukolle -->
<style>
th,td { padding: 15px; }
th { color: #ffffff; padding-top:20px; padding-bottom:20px;}
th:hover { text-decoration: underline; }
</style>

14) Tämän jälkeen siirryn pois koodi-tilasta ja klikkaan "julkaise". 

Jos haluan myöhemmin lisätä taulukoita, minun ei tarvitse välittää olemassa olevasta koodista. Riittää, että luon kaksirivisen taulukon ja valitsen otsikkosolun tyypiksi ylätunnisteen. Sen jälkeen siitä tulee automaattisesti tuollainen "avattava" palikka.
Suojelusenkeli
Suojelusenkeli