Jquery. hide() en .show()

[NickvB]

Hallo medeprogammeurs

Mijn vraag
Voor school moet ik een opdracht maken waarbij antwoorden op een faq pagina kunnen worden weergeven en verborgen.

De bedoeling is dat als er 1x op de h2 wordt geklikt, de .answer in de onderstaande div wordt weergevn. Als er weer op de h2 wordt geklikt dan moet de div sluiten. Dat heb ik al voor elkaar gekregen met $(event.target).next('.answer').slideToggle('fast');.

Nu is de vraag hoe kan ik als er op een andere vraag wordt geklikt de andere div sluiten. (Alle divs hebben de .answer tag)

Wat ik al gevonden of geprobeerd heb

Ik moet iets met een if/else doen denk ik, ik heb veel geprobeerd maar kom er totaal niet meer uit.
De code:

code:

$(document).ready(function ()
{
    // Alle antwoorden verbergen
    $('.answer').hide();
    // Als er op de h2 tag wordt geklikt opent de functie
    $('h2').on('click', function ()
    {  
        $(event.target).next('.answer').slideToggle('fast');
        if(this.is(":visible"))
        {
             $('.answer').hide();
        }
        else
        {
             $(event.target).next('.answer').slideToggle('fast');
        }       
    });
});

[ Voor 4% gewijzigd door NickvB op 26-05-2016 17:30 ]

[Knutselsmurf]

Een voorgekauwd antwoord zult je hier niet vinden. JIJ bent tenslotte degene die je schooldiploma moet behalen, niet wij

Een algemene hint: Probeer vor jezelf duidelijk te krijgen WELKE div verborgen moet worden. Is dat degene die onder de huidige h2 valt? Of wellicht een ander? Weet je welke andere? Of moet je ze wellicht allemaal sluiten?

[NickvB]

Ik heb 3 h2 tags met daaronder de divs die verborgen moeten worden. Deze hebben alledrie dezelfde class .answer.

Ik begrijp echter niet hoe ik deze dan moet selecteren als er nog een keer op wordt geklikt

[johnkeates]

Kan je ze dan niet gewoon allemaal aan een eventListener knopen a la pub/sub of anders observer-style werken?

[Ventieldopje]

NickvB schreef op donderdag 26 mei 2016 @ 18:00:
Ik heb 3 h2 tags met daaronder de divs die verborgen moeten worden. Deze hebben alledrie dezelfde class .answer.

Ik begrijp echter niet hoe ik deze dan moet selecteren als er nog een keer op wordt geklikt

Of: allemaal sluiten en alleen de gene openen waarop is geklikt

Of: eens googlen op de sibling selector en die allemaal sluiten

Maar het is jouw opdracht. Uitzoeken van dingen is part of the job

[DJMaze]

Gooi heel jQuery overboord (het is IMHO niet goed om zo JavaScript te leren).

Je hebt alleen wat HTML en CSS nodig. Hieronder een basis voorbeeld (dus niet perfect):

Cascading Stylesheet:

.antwoord { display:none; }
#vraag1:target .antwoord { display:block;}

HTML:

<div id="vraag1">
    <h2></h2>
    <div class="antwoord"></div>
</div>

https://css-tricks.com/on-target/

Bijkomend voordeel: je kan direct linken naar een antwoord in bijvoorbeeld e-mails

[ Voor 52% gewijzigd door DJMaze op 26-05-2016 18:33 . Reden: Beter uitgelegd ]

[Aganim]

Nog een opmerking, als je jQuery wilt blijven gebruiken voor deze opdracht:

JavaScript:

$(document).ready(function ()
{
    // Alle antwoorden verbergen
    $('.answer').hide();

Dit kan je naar mijn mening wel beter via CSS afhandelen. Waarom zou je eerst alle vragen geopend tonen, om ze meteen te sluiten via een script? Waarbij 'meteen' relatief is, op tragere apparaten/verbindingen (bijv. mobiele telefoons) kan het tot gevolg hebben dat je een verspringing in je pagina ziet net na het inladen.

Uiteindelijk handelt jQuery dit ook af door er een CSS style aan te plakken, dus dan kan je beter meteen inladen met een display:none.

[NickvB]

HTML:

    <div class="main">
<h1>Een simpele bedrijfsstage FAQ (Veel gestelde vragen)</h1>
<h2>Heb ik als leerling tijdens mijn stage schoolvakanties?</h2>
      <div class="answer">
        <p>Je moet als leerling je houden aan de richtlijnen van het bedrijf. Dus als je vrij wilt hebben zul je bij begeleider een verlofaanvraag moeten indienen.</p>
      </div>
      <h2>Hoe kun je zien of dat een bedrijf een juiste erkenning heeft?</h2>
      <div class="answer">
        <p>Via de site: www.ecabo.nl  ->(helemaal bovenaan) ECABO leerbedrijven

Bedrijfsnaam:  ....... <br>
Postcode of plaats: (b.v. 's-Hertogenbosch) <br>
Opleiding:  (b.v. ICT-Beheerder)<br><br>

bevestig: Zoek <br><br>

Selecteer het bedrijf.<br><br>

Onder tabblad: Opleidingsmogelijkheden<br>
staan de opleidingen waarvoor het bedrijf erkend is. </p>
      </div>
      <h2>Wat moet ik doen als ik na het solliciteren niets meer van het bedrijf hoor?</h2>
      <div class="answer">
        <p>Neem direct  contact met het stageloket van de ICT-Academie op zodat die actie kunnen ondernemen.</p>
      </div>
    </div>

Zo is de html ingedeeld

Ik heb nu de vorige kunnen sluiten met deze code, maar als ik dan op de 1e of 2e klik moeten de volgende sluiten. Nu is de vraag weer hoe ik dat ga aanpakken

JavaScript:

$('h2').on('click', function ()
    {   
        $(event.target).next('.answer').slideToggle('fast');
        $(event.target).prev('.answer').slideToggle('fast');    
    });

Edit: Display:none in css is een goed idee!, Had ik zelf nog niet aan gedacht!

[Ventieldopje]

NickvB schreef op donderdag 26 mei 2016 @ 18:40:

HTML:

    <div class="main">
<h1>Een simpele bedrijfsstage FAQ (Veel gestelde vragen)</h1>
<h2>Heb ik als leerling tijdens mijn stage schoolvakanties?</h2>
      <div class="answer">
        <p>Je moet als leerling je houden aan de richtlijnen van het bedrijf. Dus als je vrij wilt hebben zul je bij begeleider een verlofaanvraag moeten indienen.</p>
      </div>
      <h2>Hoe kun je zien of dat een bedrijf een juiste erkenning heeft?</h2>
      <div class="answer">
        <p>Via de site: www.ecabo.nl  ->(helemaal bovenaan) ECABO leerbedrijven

Bedrijfsnaam:  ....... <br>
Postcode of plaats: (b.v. 's-Hertogenbosch) <br>
Opleiding:  (b.v. ICT-Beheerder)<br><br>

bevestig: Zoek <br><br>

Selecteer het bedrijf.<br><br>

Onder tabblad: Opleidingsmogelijkheden<br>
staan de opleidingen waarvoor het bedrijf erkend is. </p>
      </div>
      <h2>Wat moet ik doen als ik na het solliciteren niets meer van het bedrijf hoor?</h2>
      <div class="answer">
        <p>Neem direct  contact met het stageloket van de ICT-Academie op zodat die actie kunnen ondernemen.</p>
      </div>
    </div>

Zo is de html ingedeeld

Ik heb nu de vorige kunnen sluiten met deze code, maar als ik dan op de 1e of 2e klik moeten de volgende sluiten. Nu is de vraag weer hoe ik dat ga aanpakken

JavaScript:

$('h2').on('click', function ()
    {   
        $(event.target).next('.answer').slideToggle('fast');
        $(event.target).prev('.answer').slideToggle('fast');    
    });

Edit: Display:none in css is een goed idee!, Had ik zelf nog niet aan gedacht!

Psst. kuch. siblings.

[Haan]

Moet het perse op deze manier? Anders zou ik kijken naar accordion functionaliteit, al dan niet uit een bestaande library

[ajakkes]

Want... voor siblings hide, this show heb je een library nodig?

Denk overigens dat je met DJMaze z'n oplossing extra punten scoort.

[Ventieldopje]

ajakkes schreef op donderdag 26 mei 2016 @ 20:44:
Want... voor siblings hide, this show heb je een library nodig?

Denk overigens dat je met DJMaze z'n oplossing extra punten scoort.

Waarom niet? Nadeel van DJMaze's oplossing is dat je gaat werken met ID's in je stylesheet, wat het werken met dynamische content lastig maakt en ik het bovendien slordig vind staan.

Om te werken met dynamische ID's moet je ook dynamisch een (extra) stylesheet aanmaken waar al die ID's genoemd worden.

Als je verder op je site geen libraries gebruikt is dat prima maar anders zou ik de moeite besparen en het oplossen met de siblings selector. Wil je daar niet van afhankelijk zijn kun je ook gebruik maken van een class die de staat weergeeft van het item (active bijv.). Haal met $.removeClass de active class weg van alle items en geef het actieve item de class active met $.addClass. Hooguit een paar regels code en het is overzichtelijk.

[NickvB]

DJMaze's oplossing is goed maar het is meer de bedoeling dat ik alleen het JS bestand bewerk en de html laat voor wat het is. Bij deze opdracht was het meer de bedoeling dat ik leerde werken met .show() en .hide(), .fadeIn(‘slow’) en fadeOut(‘slow’) en niet te vergeten .next(). Vandaar

Edit: Op de toetsen mag ik de html ook niet bewerken(meestal krijgen we een .rar met de html/css), daarom doe ik het liever in het JS bestand alleen.

[ Voor 19% gewijzigd door NickvB op 26-05-2016 22:42 ]

[DJMaze]

Ventieldopje schreef op donderdag 26 mei 2016 @ 21:54:
Om te werken met dynamische ID's moet je ook dynamisch een (extra) stylesheet aanmaken waar al die ID's genoemd worden.

Dat hoeft helemaal niet. Het was maar een voorbeeld.

NickvB schreef op donderdag 26 mei 2016 @ 22:39:
DJMaze's oplossing is goed maar het is meer de bedoeling dat ik alleen het JS bestand bewerk en de html laat voor wat het is. Bij deze opdracht was het meer de bedoeling dat ik leerde werken met .show() en .hide(), .fadeIn() en fadeOut() en niet te vergeten .next(). Vandaar

En waarom leer je op school jQuery? Ik vind dat echt de grootste WTF allertijden.
Goed je leert wel wat, maar het slaat kant nog wal. Je leert namelijk geen JavaScript, dus alle banen die vragen om ECMAScript, JavaScript, Node.js, MooTools, Prototype, YUI, Ext, Dojo, etc. etc. kan je vergeten.
Je leert ook helemaal niet wat die show() nou precies doet. Is het CSS display:none of CSS visibility:hidden of toggle class "hidden"?

Een hele library inladen voor alleen een soort van het volgende?

JavaScript:

function hideAnswers()
{
    document.querySelectorAll(".antwoord").forEach(function(element) {
        element.style.display = "none";
    });
}
function clickH2()
{
    var answer = this.nextSibling; // Kan ook met this.querySelector('~ .antwoord')
    var hidden = ("block" != answer.style.display);
    hideAnswers();
    if (hidden) {
        answer.style.display = "block";
    }
}
function init()
{
    document.querySelectorAll("h2").forEach(function(h2) {
        h2.addEventListener('click', clickH2, false);
    });
}

Genoeg offtopic En nu: je kan bovenstaand omzetten naar jQuery compatible code

[ Voor 4% gewijzigd door DJMaze op 27-05-2016 00:45 ]

[Ventieldopje]

DJMaze schreef op vrijdag 27 mei 2016 @ 00:32:
[...]

Dat hoeft helemaal niet. Het was maar een voorbeeld.


[...]

En waarom leer je op school jQuery? Ik vind dat echt de grootste WTF allertijden.
Goed je leert wel wat, maar het slaat kant nog wal. Je leert namelijk geen JavaScript, dus alle banen die vragen om ECMAScript, JavaScript, Node.js, MooTools, Prototype, YUI, Ext, Dojo, etc. etc. kan je vergeten.
Je leert ook helemaal niet wat die show() nou precies doet. Is het CSS display:none of CSS visibility:hidden of toggle class "hidden"?

Een hele library inladen voor alleen een soort van het volgende?

JavaScript:

function hideAnswers()
{
    document.querySelectorAll(".antwoord").forEach(function(element) {
        element.style.display = "none";
    });
}
function clickH2()
{
    var answer = this.nextSibling; // Kan ook met this.querySelector('~ .antwoord')
    var hidden = ("block" != answer.style.display);
    hideAnswers();
    if (hidden) {
        answer.style.display = "block";
    }
}
function init()
{
    document.querySelectorAll("h2").forEach(function(h2) {
        h2.addEventListener('click', clickH2, false);
    });
}

Genoeg offtopic En nu: je kan bovenstaand omzetten naar jQuery compatible code

Nou nou, wat een aversie tegen een framework jQuery is namelijk altijd nog geen taal en je leert er altijd nog javascript van. Prima om mee te beginnen maar zoals met alles is het aan de gene die wil leren om te verdiepen. Of je dit doet heeft niks te maken met wat je als eerste leert.

Dat hij nu niet in aanmerking komt voor die banen mag logisch zijn als je net om de hoek komt kijken

[ Voor 3% gewijzigd door Ventieldopje op 27-05-2016 01:26 ]

[NickvB]

Ik heb aan een klasgenoot gevraagd hoe hij het heeft gedaan, het moest dus zo:

code:

$(document).ready(function ()
{
    //  Alle antwoorden worden verborgen via css (sneller)
    //  $('.answer').hide();

    //  Als er op de h2 tag wordt geklikt opent de functie
    $('h2').on('click', function ()
    {
        // Als de anderen antwoorden zichtbaar zijn worden deze gesloten
        if ($(this).next().css('display') == 'block')
        {
            $(this).next().hide();
        }

        else
        {
            $('.answer').hide();
            $(this).next().show();
        }
    });
});

Ik krijg jQuery en Javascript als een vak btw
Maar bedankt voor jullie hulp!

[DJMaze]

Ventieldopje schreef op vrijdag 27 mei 2016 @ 01:25:
Nou nou, wat een aversie tegen een framework jQuery is namelijk altijd nog geen taal en je leert er altijd nog javascript van. Prima om mee te beginnen maar zoals met alles is het aan de gene die wil leren om te verdiepen. Of je dit doet heeft niks te maken met wat je als eerste leert.

Klopt!

Ik begeleid leerlingen op hun stage en als ze dan met Joomla aan de slag gaan is het standaard MooTools.
Echter wordt er door Joomla extensies verschillende versies van jQuery ingeladen, en dan zie ik ze worstelen om hun eigen jQuery code aan de praat te krijgen door de conflicten.
Het is niet hun schuld, het probleem wordt veroorzaakt door hun voorgangers.

Mijn aversie is niet zozeer jQuery zelf maar eerder het feit dat het gebruik van jQuery.noConflict() enzo wordt overgeslagen.
In zo'n geval kost programmeren in standaard JavaScript net zoveel of zelfs minder tijd omdat je niet hoeft te zoeken/debuggen in andermans code.

Gelukkig geeft hij aan dat hij in het schoolvak beide leert 👍

[ Voor 10% gewijzigd door DJMaze op 27-05-2016 11:43 ]

[EJlol]

Ongetwijfeld niet de bedoeling van de schoolopdracht, maar een andere mogelijkheid is de details en summary html5 tags. Let er wel op dat (nog) niet alle browsers dit volledig ondersteunen.

[DJMaze]

EJlol schreef op vrijdag 27 mei 2016 @ 14:24:
Ongetwijfeld niet de bedoeling van de schoolopdracht, maar een andere mogelijkheid is de details en summary html5 tags. Let er wel op dat (nog) niet alle browsers dit volledig ondersteunen.

Daar had ik ook aan gedacht, maar dan kan je niet alles in 1x inklappen, tenzij je dat weer met JavaScript doet.
Het werkt wel handig, zie https://dragonflycms.org/Forums/faq.html

[ Voor 7% gewijzigd door DJMaze op 28-05-2016 10:30 ]