Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

inklappen deel tekst - javascript

None
16 antwoorden
  • Hallo,

    onderstaande code heb ik "geleend" uit een htmlfile. Dit kan je gebruiken om delen van een tekst op een pagina in- of uit te klappen.
    [code:1:9860be7ad9] <!– Start inklap-script –>
    <script type="text/javascript">
    function toggleSection(sectionName) {
    var section = document.getElementById(sectionName + 'div');
    var link = document.getElementById(sectionName + 'link');

    if(section.style.display == "none") {
    section.style.display = "";
    link.innerHTML = "Verbergen";
    }
    else {
    section.style.display = "none";
    link.innerHTML = "Tonen";
    }
    return false;
    }
    </script>
    <!– Eind inklap-script –>
    [/code:1:9860be7ad9]
    De link om te "klappen" ziet er als volgt uit: [code:1:9860be7ad9]<a href="#" id="sec1link" onclick="return toggleSection('sec1');">Tonen</a>[/code:1:9860be7ad9]
    De sectie markeer je met: [code:1:9860be7ad9]<div id="sec1div" style="display:none"> INHOUD </div>
    [/code:1:9860be7ad9]

    Door de verschillende secties verschillende namen te geven kan je losse onderdelen in- en uitklappen met verschillende links.
    Maar ik ben op zoek naar een mogelijkheid om met 1 klik [b:9860be7ad9]alle secties[/b:9860be7ad9] in- of uit te klappen.
    Kan iemand die wèl verstand heeft van javascript en html me hierin helpen?

    dank,
    rolf
  • Javascript kan niet ruiken wat een sectie is en wat niet, die zul je toch echt moeten definieren:
    [code:1:20c2f2df9f]
    var names = new Array('sec1', 'sec2', 'sec3');
    names.foreach(toggleSection);
    [/code:1:20c2f2df9f] Stop deze code in een functie en roep m aan net zoals je toggleSection aanroept.

    Je kan ook alle secties dezelfde class geven en dan met bhv getElementsByClassName het inklapgebeuren doen.
    Mogelijkheden te over!
  • euhm, had ik erbij verteld dat ik best leuk kan nadenken, maar geen verstand heb van javascript…?
    Kan je iets meer verklappen? :oops:
  • [code:1:26b98e3597]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test inklpap div-jes</title>
    <!– Start inklap-script –>
    <script type="text/javascript">
    function toggleSection(sectionName) {
    var names = new Array('sec1', 'sec2', 'sec3');
    var section = document.getElementById(sectionName + 'div');
    var link = document.getElementById(sectionName + 'link');

    if(section.style.display == "none") {
    section.style.display = "";
    link.innerHTML = "Verbergen";
    }
    else {
    section.style.display = "none";
    link.innerHTML = "Tonen";
    }
    return false;
    }
    </script>
    <!– Eind inklap-script –>
    </head>

    <body>
    Alle inhoud <a href="#" id="nameslink" onclick="return toggleSection('names');">Tonen</a><br /><br />

    <div id="namesdiv" style="display:none">

    Alleen inhoud 1 <a href="#" id="sec1link" onclick="return toggleSection('sec1');">Tonen</a><br /><br />
    Alleen inhoud 2 <a href="#" id="sec2link" onclick="return toggleSection('sec2');">Tonen</a><br /><br />
    Alleen inhoud 3 <a href="#" id="sec3link" onclick="return toggleSection('sec3');">Tonen</a><br /><br />
    <div id="sec1div" style="display:none"> INHOUD 1 </div><br />
    <div id="sec2div" style="display:none"> INHOUD 2 </div><br />
    <div id="sec3div" style="display:none"> INHOUD 3 </div><br />

    </div><br />

    </body>
    </html>
    [/code:1:26b98e3597]
    laat eerst 1 link zien waarmee je de rest tevoorschijn kunt toveren.
    ik hoop dat je dit bedoeld.
  • Dank voor je voorbeeld en de moeite, maar dat is helaas niet wat ik bedoel.
    Wat ik graag wil, is dat ik ipv 3 keer klikken op "verberg" waarna 3 secties inklappen (en de linkjes weer veranderen in " toon";), ik 1 keer kan klikken waarna 3 secties inklappen (en de linkjes weer veranderen in " toon";).
    Dus eigenlijk een " klap alle secties in" link, ipv alle inklaplinkjes inklappen. Snap je me nog..?
  • [quote:3c485c7823="rolfb"]euhm, had ik erbij verteld dat ik best leuk kan nadenken, maar geen verstand heb van javascript…?
    Kan je iets meer verklappen? :oops:[/quote:3c485c7823]

    Maar, in principe staat hier je antwoord: alles in een array stoppen, en die aanroepen met een eventhandler: onclick="doe_iets()".

    En wil je dat we hier kant en klare code voor je schrijven, of wil je een begin maken met javascript leren?
  • Ik weet niet of de TS wil beginnen met het leren van Javascript,
    maar ik wil altijd wel bijleren. en omdat dit script misschien nog wel eens van pas kan komen, waag ik een poging om het probleem op te lossen.

    dit is wat ik tot nu toe heb:
    [code:1:bc5f6f32a9]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test inklpap div-jes</title>
    <script type="text/javascript">
    function toggleAllSections(allNames)
    { var allNames = new Array('sec1', 'sec2', 'sec3');
    var n = allNames.length;
    var x = 0;

    while (x<n)
    { return toggleSection(allNames[x]);
    x++;
    }
    }

    function toggleSection(sectionName)
    { var section = document.getElementById(sectionName + 'div');
    var link = document.getElementById(sectionName + 'link');

    if (section.style.display == "none")
    { section.style.display = "";
    link.innerHTML = "Verbergen";
    }

    else
    { section.style.display = "none";
    link.innerHTML = "Tonen";
    }
    return false;
    }
    </script>
    </head>

    <body>
    Alle inhoud <a href="#" onclick="return toggleAllSections('allNames');">Tonen / verbergen</a><br /><br />
    Alleen inhoud 1 <a href="#" class="all" id="sec1link" onclick="return toggleSection('sec1');">Tonen</a><br /><br />
    Alleen inhoud 2 <a href="#" class="all" id="sec2link" onclick="return toggleSection('sec2');">Tonen</a><br /><br />
    Alleen inhoud 3 <a href="#" class="all" id="sec3link" onclick="return toggleSection('sec3');">Tonen</a><br /><br />
    <div id="sec1div" style="display:none"> INHOUD 1 </div><br />
    <div id="sec2div" style="display:none"> INHOUD 2 </div><br />
    <div id="sec3div" style="display:none"> INHOUD 3 </div><br />

    </body>
    </html>
    [/code:1:bc5f6f32a9]

    door op de eerste link te klikken wordt de functie toggleAllSections(allNames) gestart. het enige probleem is de while loop.
    van de array wordt alleen de eerste naam gelezen en dan stopt het.
    ook de for variant doet precies hetzelfde:
    [code:1:bc5f6f32a9]
    function toggleAllSections(allNames)
    { var allNames = new Array('sec1', 'sec2', 'sec3');
    var n = allNames.length;

    for (x=0; x<n; x++)
    { return toggleSection(allNames[x]);
    }
    }
    [/code:1:bc5f6f32a9]

    het maakt ook geen verschil of ik x<n gebruik of x<=n
    in iedere situatie wordt de for- of while-loop maar 1 keer uitgevoerd.
  • Goed dat je wat wilt leren. Je gaat mis met de return: deze gooit het resultaat erachter terug uit de functie waarna de functie niet wordt doorgezet. Haal de return weg uit toggleAllSections maar laat alles erachter staan en het zou moeten werken.
  • je hebt gelijk marientje!
    met deze for-loop werkt het wel.
    [code:1:0a4613515c]
    for (x=0; x<n; x++)
    { toggleSection(allNames[x]);
    }
    [/code:1:0a4613515c]
    bedankt!
  • Let er wel op dat een toggle de status verborgen/getoond omdraait. Je kunt hiermee dus niet alle secties verbergen wanneer er twee zijn uitgeklapt en twee niet. Ook wordt de tekst van de aparte secties niet gewijzigd.

    Een variant met getElementsByClassName:
    [code:1:afb50cafc4]function showElem(elem)
    { elem.style.display = "";
    }
    function hideElem(elem)
    { elem.style.display = "none";
    }
    function showAll(className)
    { getElementsByClassName(className).forEach(showElem);
    }
    function hideAll(className)
    { getElementsByClassName(className).forEach(hideElem);
    }[/code:1:afb50cafc4]
    [code:1:afb50cafc4]
    <a href="#" onclick="showAll('section'); return false;">Alles tonen</a>&nbsp;<a href="#" onclick="hideAll('section'); return false;">Alles verbergen</a><br /><br />
    <div class="section" style="display:none"> INHOUD 1 </div><br />
    <div class="section" style="display:none"> INHOUD 2 </div><br />
    <div class="section" style="display:none"> INHOUD 3 </div><br />
    [/code:1:afb50cafc4]
  • het klopt dat de status wordt omgedraaid.
    ik heb de tekst van de link dus ook veranderd van
    "Tonen / verbergen" naar "Selectie omdraaien"
    maar niet alleen de status, ook de innerHTML in de link wordt keurig bijgewerkt.

    in je code voor de getElementsByClassName manier zitten
    2 typfoutjes;

    regel 2 ben je een = vergeten na display
    in de link Alles verbergen mist een ; na false

    maar als ik die verbeter werkt het nog niet:
    [code:1:62e5756c47]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test inklpap div-jes: getElementsByClassName</title>
    <script type="text/javascript">
    function toggleSection(sectionName)
    { var section = document.getElementById(sectionName + 'div');
    var link = document.getElementById(sectionName + 'link');

    if (section.style.display == "none")
    { section.style.display = "";
    link.innerHTML = "Verbergen";
    }

    else
    { section.style.display = "none";
    link.innerHTML = "Tonen";
    }
    return false;
    }

    function showElem(elem)
    { elem.style.display = "";
    }
    function hideElem(elem)
    { elem.style.display = "none";
    }
    function showAll(className)
    { getElementsByClassName(className).forEach(showElem);
    }
    function hideAll(className)
    { getElementsByClassName(className).forEach(hideElem);
    }
    </script>
    </head>

    <body>
    <a href="#" onclick="showAll('section'); return false;">Alles tonen</a>&nbsp;
    <a href="#" onclick="hideAll('section'); return false;">Alles verbergen</a><br /><br />
    Alleen inhoud 1 <a href="#" id="sec1link" onclick="return toggleSection('sec1');">Tonen</a><br />
    Alleen inhoud 2 <a href="#" id="sec2link" onclick="return toggleSection('sec2');">Tonen</a><br />
    Alleen inhoud 3 <a href="#" id="sec3link" onclick="return toggleSection('sec3');">Tonen</a><br />
    <div class="section" id="sec1div" style="display:none"> INHOUD 1 </div><br />
    <div class="section" id="sec2div" style="display:none"> INHOUD 2 </div><br />
    <div class="section" id="sec3div" style="display:none"> INHOUD 3 </div><br />

    </body>
    </html>
    [/code:1:62e5756c47]
  • waarschijnlijk moet je nog even het script downloaden van de website en dan <script type="text/javascript" src="getElementsByClassName-1.0.1.js" language="javascript"></script> invoegen in de head, bij mij werkt ie dan.

    Let wel dat als je alles tonen doet, de individuele teksten niet veranderen en dus verkeerd zijn.
  • klopt. ik had inderdaad nog niet de .js ingevoegd,
    met dat bestand werkt de getElementsByClassName wel goed.

    ik heb nu de winnende variant, een combinatie van
    de Array met for-loop en de getElementsByClassName samen.
    de link "Alles tonen" roept nu 2 functies aan en past dus ook de
    innerHTML tekst van de andere links aan. als alles is uitgeklapt werkt de
    link alles tonen niet meer, maar kun je wel "Alles verbergen" gebruiken.

    Hier is de code voor het script, zoals de TS bedoelde in de startpost:
    [code:1:91388e2fae]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test inklpap div-jes: getElementsByClassName</title>
    <script type="text/javascript" src="getElementsByClassName-1.0.1.js"></script>
    <script type="text/javascript">
    function toggleAllSections(allNames)
    { var allNames = new Array('sec1', 'sec2', 'sec3');
    var n = allNames.length;

    for (x=0; x<n; x++)
    {toggleSection(allNames[x]);}
    }

    function toggleSection(sectionName)
    { var section = document.getElementById(sectionName + 'div');
    var link = document.getElementById(sectionName + 'link');

    if (section.style.display == "none")
    { section.style.display = "";
    link.innerHTML = "Verbergen";
    }

    else
    { section.style.display = "none";
    link.innerHTML = "Tonen";
    }
    return false;
    }

    function showElem(elem)
    { elem.style.display = "none";
    }
    function hideElem(elem)
    { elem.style.display = "";
    }
    function showAll(className)
    { getElementsByClassName(className).forEach(showElem);
    }
    function hideAll(className)
    { getElementsByClassName(className).forEach(hideElem);
    }
    </script>
    </head>

    <body>
    <a href="#" onclick="(showAll('section'), toggleAllSections('allNames'))">Alles tonen</a>&nbsp;&nbsp;&nbsp;
    <a href="#" onclick="(hideAll('section'), toggleAllSections('allNames'))">Alles verbergen</a><br /><br />
    Alleen inhoud 1 <a href="#" id="sec1link" onclick="return toggleSection('sec1');">Tonen</a><br />
    Alleen inhoud 2 <a href="#" id="sec2link" onclick="return toggleSection('sec2');">Tonen</a><br />
    Alleen inhoud 3 <a href="#" id="sec3link" onclick="return toggleSection('sec3');">Tonen</a><br />
    <div class="section" id="sec1div" style="display:none"> INHOUD 1 </div><br />
    <div class="section" id="sec2div" style="display:none"> INHOUD 2 </div><br />
    <div class="section" id="sec3div" style="display:none"> INHOUD 3 </div><br />

    </body>
    </html>
    [/code:1:91388e2fae]
    Ik weet dat er in de functie showElem staat elem.style.display = "none",
    en in de functie hideElem elem.style.display = "".
    dit ziet er tegenstrijdig uit, maar op deze manier werkt alles wel.
  • [quote:bdb81be480="PepijnG"]
    Ik weet dat er in de functie showElem staat elem.style.display = "none",
    en in de functie hideElem elem.style.display = "".
    dit ziet er tegenstrijdig uit, maar op deze manier werkt alles wel.[/quote:bdb81be480]
    Waarom is dat tegenstrijdig?
  • de functie showElem heeft: elem.style.display = "none",
    dat betekend dat de style veranderd moet worden in display="none",
    oftewel, dat de div niet zichtbaar moet zijn.

    de functie hideElem heeft: elem.style.display = "".
    dat betekend dat de style veranderd moet worden in display="",
    oftewel, dat de div wel zichtbaar moet zijn.

    toch werkt alles wel zoals het bedoeld is.
    daarom ziet het er tegenstrijdig uit.
  • De reden dat het werk is omdat je het style attribute reset naar een lege waarde en dan wordt de standaard display waarde voor dat element aangenomen, wat block is. Je kan dus ook "block" neerzetten.

    Als je het leuk vind om met javascript te spelen, kijk eens naar het jquery framework. Daarmee kan je heel krachtig javascripten. De volgende regel code bijv. hide alle blockjes:

    [code:1:4b909fa04a]
    $(".section").hide();
    [/code:1:4b909fa04a]
    en een enkel element kan je dan zo showen:
    [code:1:4b909fa04a]
    function toggleSection(blockID, link){
    $("#"+blockID).show();
    $(link).html("Element verbergen");
    }
    [/code:1:4b909fa04a]
    die je dan zo aanroept:
    [code:1:4b909fa04a]
    <a .. onclick="toggleSection('sec1div',this)">
    [/code:1:4b909fa04a]

    Daarvoor moet je dus wel eerst de jquery libary includen.(http://jquery.com/)

    even ter informatie:

    dit stukje : $(".section";) is gelijk aan de function getElementsByClass die marientje al gaf. Vervolgens roep je op die collectie van elementen de hide methode aan.

    Het is een compleet andere manier van javascripten. Maar het is zeker de moeite waard om eens naar te kijken.


    Succes!

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.