donderdag 29 april 2010

Script: in en uitklappen van tekst binnen website

Het lijkt zo makkelijk als je alleen maar websites bekijkt en ze niet hoeft te maken: een link in de website en als je er op klikt, klapt er een stukje tekst open. Dat is makkelijk omdat de bezoeker niet een aparte webpagina hoeft te openen om de tekst te kunnen bekijken en omdat de bezochte pagina niet direct hele lappen tekst lijkt te bevatten. Eerlijk gezegd maak ik tegenwoordig amper meer een website zonder deze techniek te gebruiken. Voorbeelden: www.fransjorna.nl en www.beautysalonalaa.nl


Er zijn een viertal elementen nodig om dit te laten werken:


  1. Het script:

    <script type="text/javascript">
    function kadabra(zap) {
    if (document.getElementById) {
    var abra = document.getElementById(zap).style;
    if (abra.display == "block") {
    abra.display = "none";
    } else {
    abra.display= "block";
    }
    return false;
    } else {
    return true;
    }
    }
    </script>
    (te plaatsen in de head)


  2. Style script:

    <style type="text/css">
    #tekst {
    display: none;
    width: 250px;
    border: 1px solid black;
    background-color: #cccccc;
    padding: 5px;
    font-size: 12px;
    }
    </style> (ook plaatsen in de head)


  3. Tekst die open moet klappen (zelf schrijven) en die vervolgens plaatsen tussen:

    <p id="tekst">
    </p> (de verwijzing "tekst" kan natuurlijk aangepast worden en dan moet die vervolgens ook aangepast worden binnen het style script en de link hieronder.)


  4. Een link waarop geklikt moet worden om de tekst uit 3) zichtbaar en onzichtbaar te maken:

    <a href="#" onclick="return kadabra('tekst');"> Hier de link naar je tekst die zichtbaar is voor je bezoekers en waar ze op moeten klikken om de tekst uit 3) te kunnen zien.</a>


En illustraties / pictures / images / foto's? Dat werkt op dezelfde manier. Alleen onder 3) een verwijzing naar een image bestand plaatsen in plaats van tekst. Maar wat betreft images en foto's raad ik toch echt lightbox aan.

Groeten,

Meindert (dewebmeester.nl)

(wordt vervolgt)

6 opmerkingen:

  1. Beste Meindert,

    Ik zou dit graag toepassen op mijn wordpress site, is dat mogelijk? Ik ben nog niet zo bedreven in het aanpassen van scripts e.d. Kan je uitleggen waar ik deze tekst moet opnemen? Ik gebruik een Child Thema.

    BeantwoordenVerwijderen
  2. Beste Maud,
    Nou, die reactie is er totaal bij ingeschoten en kwam hem nu toevallig tegen. Is het je gelukt binnen je wordpress site? Ik ga er van uit dat de bovengenoemde zaken binnen je index.php file van je theme geplaatst moeten worden. Tenminste, wat betreft de script files (1 en 2). De tekst zaken (3 en 4) natuurlijk daar waar tekst behoort de verschijnen. Maar deze blogpost is geschreven voor een eenvoudige html /css website. Voor Wordpress kun je het beste een plugin zoeken die dit voor je oplost. Houd ons op de hoogte!

    BeantwoordenVerwijderen
  3. Beste Meindert,

    Bedankt voor deze code!

    Ik ben helemaal geen html/css/javascript expert, maar het viel me op dat als ik de bovenstaande script letterlijk kopieerde naar Dreamweaver, dat Dreamweaver dan een "syntax error" aangaf. Toen heb ik het gekopieerd vanaf de bron van de fransjorna website, en het werkte toen wel. Het viel me ook op dat sommige accentjes van de code op deze website net iets anders kopieren dan de bedoeling is, maar kopieren vanaf de bron van de fransjorna site ging helemaal perfect. (ik moest daar wel eerst even achter komen :p)

    Verder zou ik willen zeggen tegen de mensen die net als ik ook op zoek waren naar bruikbare code voor het uit/inklappen van text: de css code kun je ook in de stylesheet plaatsen (dat vind ik handiger), en omdat je hier met style "id" werkt kun je de id (in dit geval "tekst") maar aan 1 (of andere) tag toevoegen. Dat heb ik verholpen door aan de css code verschillende id's toe te kennen.

    In mijn geval werd het dus:
    #par1,
    #par2,
    #par3,
    #par4 {
    display: none;
    width: 250px;
    border: 1px solid black;
    background-color: #cccccc;
    padding: 5px;
    font-size: 12px;
    }

    waarbij je dus elk id (par1/par2/ etc.- zoveel als je wilt) aan een andere tag kunt toevoegen en dus meerdere dingen op een site in- en uitklapbaar kunt maken.

    Ik had het eerder geprobeerd met een class, maar dat lukte niet. Ik weet niet precies waarom niet.. anders was het bovenstaande niet nodig geweest, maargoed dat werkt voor mij ook prima!

    Groetjes,

    Cheryl

    BeantwoordenVerwijderen
  4. Hoi Cheryl,

    Bij mij lukt het nog niet. Is het mogelijk om je even buiten deze site te contacten?

    BeantwoordenVerwijderen
  5. Het is me inmiddels al gelukt met de plugin: jQuery Collapse-O-Matic

    BeantwoordenVerwijderen
  6. [...] pagina een script te installeren wat het mogelijk maakt om tekst te verstoppen achter een link. ( http://dewebmeester.wordpress.com/2010/04/29/script-in-en-uitklappen-van-tekst-binnen-website/ )Na klikken op de link wordt de tekst in een blok getoond. Er kwamen een paar reacties op (bedankt) [...]

    BeantwoordenVerwijderen