Accordions

In en uitklappen van extra tekst of afbeeldingen. In dit geval gebruikt bij een galerij, maar dan zijn er eigenlijk meer mediaqueries en meer styling nodig om het bij alle resoluties mooi te laten zijn.

[[https://www.w3schools.com/howto/howto_js_accordion.asp] How to w3s]

(toegepast gehad bij fotogalerij voor Intercolor)

 
  <script>
        //Collapsible Producten
        var coll = document.getElementsByClassName("collapsible");
        var i;

        for (i = 0; i < coll.length; i++) {
            coll[i].addEventListener("click", function () {
                this.classList.toggle("actief");
                var content = this.nextElementSibling;
                if (content.style.maxHeight) {
                    content.style.maxHeight = null;
                } else {
                    content.style.maxHeight = content.scrollHeight + "px";
                }
            });
        }
    </script>

 
<div class="galerij wrapper">
            <div class="foto">
                <img src="foto1.jpg" class="monster" title="interlaq transparant mat" alt="interlaq transparant mat" style="width:100%; height:100%">
                <div class="fototekst"><b>Interlaq</b> transparant mat. Berkenmultiplex met transparante laklaag.</div>
            </div>
            <div class="foto">
                <img src="foto2.jpg" class="monster" title="interlaq whitewash mat" alt="interlaq whitewash mat" style="width:100%; height:100%">
                <div class="fototekst"><b>Interlaq</b> whitewash mat. Berkenmultiplex met whitewash laklaag.</div>
            </div>
            <div class="foto">
                <img src="foto3.jpg" class="monster" title="interform zwart" alt="interform zwart" style="width:100%; height:100%">
                <div class="fototekst"><b>Interform</b> zwart. Berkenmultiplex met zwarte semitransparante coating.</div>
            </div>
            <div class="foto">
                <img src="foto4.jpg" class="monster" title="interform groen" alt="interform groen" style="width:100%; height:100%">
                <div class="fototekst"><b>Interform</b> groen. Berkenmultiplex met groene semitransparante coating.</div>
            </div>
    <button type="button" class="collapsible" title="Meer/minder producten" alt="button om meer producten te zien"></button>
    <div class="content">
                <div class="foto">
                    <img src="foto5.jpg" class="monster" title="interform geel" alt="interform geel" style="width:100%; height:100%">
                    <div class="fototekst"><b>Interform</b> geel. Berkenmultiplex met gele semitransparante coating.</div>
                </div>
                <div class="foto">
                    <img src="foto6.jpg" class="monster" title="interform lichtbruin" alt="interform lichtbruin" style="width:100%; height:100%">
                    <div class="fototekst"><b>Interform</b> lichtbruin. Berkenmultiplex met lichtbruine semitransparante coating.</div>
                </div>
                <div class="foto">
                    <img src="foto7.jpg" class="monster" title="interform grijs" alt="interform grijs" style="width:100%; height:100%">
                    <div class="fototekst"><b>Interform</b> grijs. Berkenmultiplex met grijze, dekkende coating.</div>
                </div>
                <div class="foto">
                    <img src="foto8.jpg" class="monster" title="interform donkerbruin" alt="interform donkerbruin" style="width:100%; height:100%">
                    <div class="fototekst"><b>Interform</b> donkerbruin. Berkenmultiplex met donkerbruine semitransparante coating.</div>
                </div>
                <div class="foto">
                    <img src="foto9.jpg" class="monster" title="interstar glad wit" alt="interstar glad wit" style="width:100%; height:100%">
                    <div class="fototekst"><b>Interstar</b> glad. Berkenmultiplex met gladde, witte melamine coating.</div>
                </div>
                <div class="foto">
                    <img src="foto10.jpg" class="monster" title="interstar structuur wit" alt="interstar structuur wit" style="width:100%; height:100%">
                    <div class="fototekst"><b>Interstar</b> structuur wit. Berkenmultiplex met PPL-laag met lichte structuur.</div>
                </div>
                <div class="foto">
                    <img src="foto11.jpg" class="monster" title="interstar structuur grijsbruin" alt="interstar structuur grijsbruin" style="width:100%; height:100%">
                    <div class="fototekst"><b>Interstar</b> structuur grijsbruin. Berkenmultiplex met PPL-laag met lichte structuur.</div>
                </div>
                <div class="foto">
                    <img src="foto12.jpg" class="monster" title="interstar structuur zilver" alt="interstar structuur zilver" style="width:100%; height:100%">
                    <div class="fototekst"><b>Interstar</b> structuur zilver. Berkenmultiplex met PPL-laag met lichte structuur.</div>
                </div>
                <div class="foto">
                    <img src="foto13.jpg" class="monster" title="interstar structuur zwart" alt="interstar structuur zwart" style="width:100%; height:100%">
                    <div class="fototekst"><b>Interstar</b> structuur zwart. Berkenmultiplex met PPL-laag met lichte structuur.</div>
                </div>
   </div>
</div>

    /* ------------ Meer producten zichtbaar via uitklappen bij kleinere beeldschermen -------------*/
    @media only screen and (max-width: 600px) {
        .collapsible {
            border-top: 1px solid #fff !important;
            text-align: center;
            color: #fff;
            cursor: pointer;
            outline: none;
            font-size: 15px;
            width: 100%;
        }

            .collapsible:hover {
                background-color: #204329;
                border-top: 1px solid #fff;
            }

            .collapsible:before {
                content: "Meer";
                text-align: center;
                font-size: 1.4rem;
                color: #fff;
                float: left;
            }

        .actief:before {
            content: "Minder";
        }

        .content {
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
        }
    }
    /* ------------ Alle producten zichtbaar bij grotere beeldschermen -------------*/
    @media only screen and (min-width: 600px) {
        .collapsible {
            display: none;
        }

        .content {
            display: flex;
            flex-flow: row wrap;
        }
    }