Differences

This shows you the differences between two versions of the page.

--- cecilia:webdesign:accordion [2022/02/10 10:59] – created ceciliav
+++ cecilia:webdesign:accordion [2022/02/10 11:06] (current) – [HTML (galerij Intercolor)] ceciliav
@@ Line 5: / Line 5: @@
 [[https://www.w3schools.com/howto/howto_js_accordion.asp] How to w3s]
+(toegepast gehad bij fotogalerij voor Intercolor)
+===== Javascript =====
+<code>
+  <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>
+</code>
+===== HTML (galerij Intercolor) =====
+<code>
+<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>
+</code>
+===== CSS =====
+<code>
+    /* ------------ 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;
+        }
+    }
+</code>