Accordeon javascript alles open

Status
Niet open voor verdere reacties.
damnsharp

damnsharp

Terugkerende gebruiker
Lid geworden
6 jan 2012
Berichten
1.394
Goedemorgen,
Ik heb een accordeonscript gevonden wat ik goed werkend heb gekregen, maar wil dat op 1 pagina (waar ik dat script heb geplaatst in de footer) alle accordeons standaard (of door middel van een knop) open zijn geklapt.
Heb gegoogled en kan wat scriptjes daarvoor vinden, maar die krijg ik bij onderstaande code niet voor mekaar.
Ben geen javascript expert, wil iemand mij ermee helpen?

De html code:
HTML: 
<div id="accordeon">
    <button class="accordion acbutton1"><span class="icon-company"></span>Accordeon 1</button>
    <div class="panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin lacus eu ante accumsan, et vulputate dui tristique.</p>
    </div>	

    <button class="accordion acbutton2"><span class="icon-company"></span>Accordeon 2</button>
    <div class="panel">
        <p>Pellentesque sollicitudin lacus eu ante accumsan, et vulputate dui tristique.</p>
    </div>	
</div><!-- #accordeon -->

De javascript code:
Code: 
<script type='text/javascript'> 

	var acc = document.getElementsByClassName("accordion");
	var i;

	for (i = 0; i < acc.length; i++) {
		acc[i].addEventListener("click", function() {
			/* Toggle between adding and removing the "active" class,
        to highlight the button that controls the panel */
			this.classList.toggle("active");

			/* Toggle between hiding and showing the active panel */
			var panel = this.nextElementSibling;
			if (panel.style.display === "block") {
				panel.style.display = "none";
			} else {
				panel.style.display = "block";
			}
		});
	}

</script>

Thanks!
 
Je kan toch met CSS er een block van maken?
 
Yes! @php4u dat is eigenlijk al voldoende. Ik zat te ingewikkeld te denken. Dank je wel :thumb:
 
Een universele accordeon in Javascript zodat je meerdere op 1 pagina kan zetten (als je dat wilt). De css heb je denk ik zelf al maar dit is de minimale css die nodig is.

Als je de Javascript kleiner wilt met eventueel slide in/out erbij dan kan je beter jQuery gebruiken.
Code: 
<style>
/* volgende selector kan weg, alleen voor test */
.accordeon::after {
    display: block; clear: both; content: "";
}
.accordeon .ac-button {
    display: block;
}
.accordeon .ac-panel {
    display: none;
}
.accordeon .ac-show + .ac-panel {
    display: block;
}
</style>

<div id="lijst_1" class="accordeon">
    <button class="ac-button"><span class="ac-icon"></span>Accordeon 1</button>
    <div class="ac-panel">
        <p>Accordeon 1 tekst. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>  
    <button class="ac-button"><span class="ac-icon"></span>Accordeon 2</button>
    <div class="ac-panel">
        <p>Accordeon 2 tekst. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>  
    <button class="ac-button"><span class="ac-icon"></span>Accordeon 3</button>
    <div class="ac-panel">
        <p>Accordeon 3 tekst. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>  
</div><!-- .accordeon -->

<br><br><br>

<div id="lijst_2" class="accordeon">
    <button class="ac-button"><span class="ac-icon"></span>Accordeon 1</button>
    <div class="ac-panel">
        <p>Accordeon 1 tekst. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>  
    <button class="ac-button"><span class="ac-icon"></span>Accordeon 2</button>
    <div class="ac-panel">
        <p>Accordeon 2 tekst. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>  
    <button class="ac-button"><span class="ac-icon"></span>Accordeon 3</button>
    <div class="ac-panel">
        <p>Accordeon 3 tekst. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>  
</div><!-- .accordeon -->

Met ergens daaronder de Javascript
Code: 
fnGetSiblings = function (e) {
    // van www.javascripttutorial.net/javascript-dom/javascript-siblings/
    var siblings = []; 
    if (!e.parentNode) return siblings;
    var sibling = e.parentNode.firstChild;
    while (sibling) {
        if (sibling.nodeType === 1 && sibling !== e) siblings.push(sibling);
        sibling = sibling.nextSibling;
    }
    return siblings;
}

fnAccordeon = function (id) {
    acc = document.getElementById(id);
    var btns =  acc.querySelectorAll('#' + id + ' .ac-button');
    for (var i=0; i < btns.length; i++) {
        btns[i].addEventListener("click", function(event) {
            event.preventDefault();
            var btn = this;
            var sibl = fnGetSiblings (btn);
            for (var j=0; j < sibl.length; j++) {
                sibl[j].classList.remove('ac-show');
            }
            btn.classList.toggle('ac-show');
        });
    }
}

fnAccordeon ('lijst_1');
fnAccordeon ('lijst_2');

Als je de icons verschillend wilt hebben dan kan dit in de css, bijvoorbeeld de 2e icon in lijst_1
Code: 
#lijst_1 .ac-button:nth-of-type(2) span::before {
    content: "€ ";
    color: blue;
}
 
Laatst bewerkt:
Dank je wel @bron voor je aanvulling :thumb:
Ik zal jouw script ook proberen.
 
Ik hoor het wel of je aanvullingen wilt.
 
In jquery is het zo makkelijk, mét animatie erin, en die <button> eruit zodat je veel mooiere buttons kan maken.
Van de css zijn 2 regels verplicht (heb ik aangegeven), de rest kan je eruit halen en zelf vormgeven.
Je kan meerdere accordeons op 1 pagina zetten, de html, css en jqeruy veranderen niet.

accordeon.jpg

Code: 
<div class="accordeon">
    <div class="ac-button"><span class="ac-icon"></span>Accordeon 1</div>
    <div class="ac-panel">
        <p>Accordeon 1 tekst. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>  
    <div class="ac-button"><span class="ac-icon"></span>Accordeon 2</div>
    <div class="ac-panel">
        <p>Accordeon 2 tekst. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>  
    <div class="ac-button"><span class="ac-icon"></span>Accordeon 3</div>
    <div class="ac-panel">
        <p>Accordeon 3 tekst. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>  
</div>
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- accordeon  + animatie -->
<script>
$(document).ready(function() {
    $(".accordeon .ac-button").on("click", function(e) {
        $(this).toggleClass("ac-show");
        // *** verwijder volgende regel als geopende items pas sluiten als er nog een keer op wordt geklikt
        $(this).siblings().removeClass("ac-show");
        $(".accordeon .ac-show + .ac-panel").stop(true, true).slideDown(400);
        $(".accordeon .ac-button:not(.ac-show ) + .ac-panel").stop(true, true).slideUp(400);
    });
});
</script>

Code: 
.accordeon {
    padding: 0 8px;
}
.ac-button {
    padding: 4px 16px 8px 16px;
    font-weight: bold;
    color: #359;
    /* regel hieronder is verplicht */
    cursor: pointer;
}
.ac-panel {
    padding: 4px 16px 8px 32px;
    /* regel hieronder is verplicht */
    display: none;
}
.ac-panel p {
	margin: 0;
}
.ac-button, .ac-show + .ac-panel {
    border-bottom: 1px solid #ccc;
}
.ac-button:first-child {
    border-top: 1px solid #ccc;
}

Als je zelf vormgeving wilt maken
Code: 
.accordeon { width: 300px; }      /* gehele accordeon */
.ac-button { background: #eee; }  /* knop van niet geopend venster */
.ac-show   { background: #ccc; }  /* knop van geopend venster */
.ac-panel  { color: #142; }       /* geopend venster */
 
Laatst bewerkt:
Dankjewel voor de jsfiddle, dat is inderdaad handig voor anderen. Heb je de berichtje #1 code van w3schools? Die lijkt er verdacht veel op :) en werkt goed. Als je jquery al gebruikt is dat de voorkeur omdat het bij een accordeon geen invloed heeft op performance. Suc6 met de website.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan