Ondersteuning » Code oplossingen gezocht » JS code om FAQs te openen onclick functioneer niet?

  • Hallo,
    deze is mij html code:

    <div class="faqs-container">
    <h2>Frequently asked Questions</h2>
    <div class="accordion">
    <h3>How do I purchace</h3>
    <div class="open active">+</div>
    <div class="close">-</div>
    </div>
    <div class="panel">
    <h6> how are you today what are you doing were wil you go today do you like to go to picnic</h6>
    </div>
    <div class="accordion">
    <h3>How are you today</h3>
    <div class="open active">+</div>
    <div class="close">-</div>
    </div>
    <div class="panel">
    <h6> how are you today what are you doing were wil you go today do you like to go to picnic</h6>
    </div>
    <div class="accordion">
    <h3>where is my</h3>
    <div class="open active">+</div>
    <div class="close">-</div>
    </div>
    <div class="panel">
    <h6> how are you today what are you doing were wil you go today do you like to go to picnic</h6>
    </div>
    </div>
    

    deze is mij JS code:

    <script>
    
    	var acc = document.getElementsByClassName('accordion');
    	 var i;
    	 var len=acc.lenght;
    	for (i=0; i<len; i++) {
    	acc[i] .addEventListener ('click', function () {
    		
    	this.classList.toggle('active')	;
    		var panel= this.nextElementSibling ;
    		if (panel.style.maxHeight) {
    			panel.style.maxHeight=null;
    			 
    		} else    {
    			panel.style.maxHeight = panel.scrollHeight + 'px'
    		
    				
    		}		
    	} );
    		
    	} 

    ik zet voor zekerheid de CSS code bij:

    
    

    .faqs-container{
    width:40%;
    margin:0 auto;

    }

    .faqs-container h2{
    font-size:28px;
    padding:4px 32px;
    color:blue;
    }

    .accordion {
    display:flex;
    background-color:#03071e;
    color:white;
    align-items:center;
    position:relative;
    cursor:pointer;
    }

    .accordion h3 {
    font-size:20px;
    padding:0 32px;
    margin:0;
    font-weight:normal;
    color:blue;
    }

    .accordion .open,
    .accordion .close {
    right:0;
    padding:0 32px;
    font-size:22px;
    font-weight:bold;
    width:30px;
    position:absolute;
    opacity:0;
    }
    .accordion .open.active,
    .accordion .close.active {
    opacity:1;

    }

    .panel{
    padding: 0 32px;
    line-height:2;
    background-color:#fdfffc;
    overflow:hidden;
    transition:all 0.5s ease-in;
    max-height:0px;
    }

    .panel.active{
    max-height:400px;

    }`
    ik ben 2 dagen bezig geweest om deze JS code samen stellen via W3school en andere bronnen maar heeft mij niet gelukt om de fout van mij JS code uitvinden.
    ik heb heleboel geprobeerd maar zonder resultaat.
    ik zie zelf geen fout maar er moet een fout zijn .
    ik heb var accordion var i var len en var panel gemaakt. ik heb add eventlistener toegevoegd en ik heb next elementsibling toegevoegd voor de var panel(content) maar toch klopt niet.
    kan iemand corregeren mij fout!
    dank u wel

    De pagina waar ik hulp bij nodig heb: [log in om de link te zien]

7 reacties aan het bekijken - 1 tot 7 (van in totaal 7)
  • Guido

    (@guido07111975)

    Hoi,

    Dit heeft niets met WordPress te maken, je kunt beter op een andere site posten zoals het JavaScript forum van PHPhulp.

    Overigens zijn hiervoor genoeg plugins, zosls:
    https://wordpress.org/plugins/jquery-collapse-o-matic/

    Guido

    Thread starter johannes999

    (@johannes999)

    dank u wel,
    ik heb wel antwoord gevonden met een example collapse dat zou mij probleem oplossen.
    ik wilde doorgeven maar ik ben moe daarom ik heb voor morgen gelaten.ik was tot 9 uur achter computer zoeken en zoeken.
    ik weet over plug ins maar ik wil liever zelf doen.
    ik heb besloten vanaf morgen 2-3 weeken lang alleen javascript en jquery leren.
    ik weet zeker de oplossing is heel makkelijk en eerlijk zeggen ik heb de antwoord in youtube gevonden. wat betreft de javascript forums ik heb dat ook nagedacht ik ga zoeken een goede forum for js en later voor php goede engelstalige of nederlandse forum waar wordt dadwerkelijk oplossingen gevonden.
    ik was ook vandaag zoeken online betaalde snelle cursus waar ik kan op praktische manier in korte tijd javascript beheersen.maar ik heb niet gevonden wat ik wilde.
    dank u wel iedre geval voor de tip als ik heb opgelost morgen ik laat u weten.
    nogmals dank u wel
    johannes
    johannes

    Thread starter johannes999

    (@johannes999)

    Hallo,
    ik heb belooft om te reageren voor deze forum.
    bovenste code is helemaal goed alleen een typo fout length moest lenght zijn:

    <script>
    
    var acc = document.getElementsByClassName('accordion');
    var i;
    var len = acc.length; // earlier it was lenght
    for (i = 0; i < len; i++) {
      acc[i].addEventListener('click', function() {
        this.classList.toggle('active');
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight) {
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + 'px'
        }
      });
    }
    
    </script>

    het werkt nu prima>
    ik denk FAQ code kan ook alleen met css en html zonder JS or jQuery als ik niet vergist.
    dank u wel

    Guido

    (@guido07111975)

    Hoi,

    Mooi zo dat het werkt. Ik vond deze pagina ook nog met eenvoudig voorbeeld:
    https://www.w3schools.com/howto/howto_js_accordion.asp

    Dit maken met alleen CSS heb ik geen ervaring mee.

    Maar nogmaals, dit forum is niet de juiste plek want heeft niets met WordPress te maken.

    Guido

    Thread starter johannes999

    (@johannes999)

    geen probleem,
    ik heb alleen beantwoordt omdat ik heb jou beloofd.
    het is voor mij geen enkele probleem ik zoek overal in codepeen ,github,youtube etc.
    ik ga eerst online dating calender maken met JS of PHP en dan ik ga deze website afronden het is bedoeld voor mij broer die heeft garage bedrijf. en dan ik ga verdipen mijzelf in JS en PHP eerst via w3schools. ik denk binnen paar maanden ik heb heleboel dingen onder controle .
    eigenlijk ik heb op dit moment niet zoveel tijd ik ben ook met anderen dingen bezig.
    anders ik leer JS binnen 2 weken.
    maar ik wil jou vragen wat is eigenlijhk WordPress volgens jou?.
    het is toch bedoeld om professionele website of web blog te bouwen .
    als u wilt leren website bouwen met wordperess dan moet u ook kennis hebben van HTML, CSS en php om te kunnen wordpress codec te begrijpen. en tegenwoordig js is onmisselijk gedeete geworden van iedere website. als u wilt responsive menu bouwen dan u hebt kennis van JS nodig.
    ik zie in deze forum heleboel secties bijv. developing met wordpress . everything else than wordpress ect etc.
    ik denk zelf dat iedere soort vraag moet welkom zijn in deze forum ,omdat het gaat uiteindelijk om websites te bouwen en niet wordpress.
    jij moet mij niet verkeer begrijpen . ik vind mij weg in alles. die is op dit moment is hobby voor mij .
    ik dank voor alles wat u hebt gedaan voor mij.
    Groetjes

    Guido

    (@guido07111975)

    ik zie in deze forum heleboel secties bijv. developing met wordpress . everything else than wordpress ect etc.
    ik denk zelf dat iedere soort vraag moet welkom zijn in deze forum ,omdat het gaat uiteindelijk om websites te bouwen en niet wordpress.

    Dit zijn WordPress fora, we willen je graag helpen maar alle code die je toevoegt heeft niets met WordPress te maken. Daar zijn andere fora voor. Met WordPress bedoel ik het CMS zelf en thema’s en plugins.

    Guido

    Thread starter johannes999

    (@johannes999)

    dank u wel,
    ik ga voortaan geen JS of buiten de codex van wordpress php vragen stellen.
    ik heb voor JS en php andere forums gevonden.
    nogmaals buiten
    bedankt

7 reacties aan het bekijken - 1 tot 7 (van in totaal 7)