Ronnico
-
Posts
6 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Everything posted by Ronnico
-
Hi there, I’ve been trying to figure out why the accordion on this site works perfectly on desktop and iPhone, but not on an iPad. I need it to work on an iPad too, but to my surprise it doesn’t work. Must be over looking something. Both iPhone and iPad have the latest Os. Maybe something in the script, but I have no knowledge of that. I’ve been searching in a many places but couldn’t find answers unfortunately If someone could help it would be highly appreciated. Thanks! <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; display: none; background-color: white; overflow: hidden; } </style> </head> <body> <h2>Accordion</h2> <button class="accordion">Section 1</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 3</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc.addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } </script> </body>
-
My apologies, I see I didn’t post correctly. I tried to adjust the script here and there, but I guess it is just not my cup a tea yet.... Does anyone have a solution? Thanks
-
Thanks for your time and effort, Foxy. Here is what it looks like for the first to modals to keep it short; <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>Naamloos document</title> </head> <style> .product {display:none} </style> <body> <!-- Container (Product Section) --> <div class="w3-content w3-container w3-padding-64" > <h3 class="w3-center">THE PRODUCTS</h3> <h5 class="w3-center"><em>Beautiful skin all year long.</em> </h5> <br> <p> <strong>Professional products for....</strong>. Some text...........</p><br> <!-- Responsive Grid. Four columns on tablets, laptops and desktops. Will stack on mobile devices/small screens (100% width) --> <div class="w3-row-padding"> <!-- Modal 1 --> <div class="w3-col m3"> <img onclick="document.getElementById('id01').style.display='block'" src="http://cityhotelsootmarsum.nl/wp-content/uploads/2017/02/koe.png" style="width:100%" onClick="onClick(this)" class="w3-hover-opacity" alt="Image 1"></p> </div> <div id="id01" class="w3-modal"> <div class="w3-modal-content w3-card-4 w3-animate-zoom"> <header class="w3-container w3-center"> <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-pink w3-xlarge w3-display-topright">×</span> <img src="http://cityhotelsootmarsum.nl/wp-content/uploads/2017/02/koe.png" style="height:400px; width:400px;"> </header> <div class="w3-bar w3-border-bottom w3-pale-red"> <button class="tablink w3-bar-item w3-button" onclick="openProduct(event, 'Characteristics')">Characteristics</button> <button class="tablink w3-bar-item w3-button" onclick="openProduct(event, 'Ingredients')">Ingredients</button> <button class="tablink w3-bar-item w3-button" onclick="openProduct(event, 'Body Sugaring Pros')">Pro's</button> </div> <div id="Characteristics" class="w3-container product"> <h2>Modal 1.1</h2> <p>I'm not nosey...</p> </div> <div id="Ingredients" class="w3-container product"> <h2>Modal 1.2</h2> <p>really....</p> </div> <div id="Body Sugaring Pros" class="w3-container product"> <h2>Modal 1.3</h2> <p>can I eat this?</p><br> </div> <div class="w3-container w3-pink w3-padding"> <button class="w3-btn w3-right w3-white w3-border" onclick="document.getElementById('id01').style.display='none'">Close</button> </div> </div> </div> <!-- Modal 2 --> <div class="w3-col m3"> <img onclick="document.getElementById('id02').style.display='block'" src="https://upload.wikimedia.org/wikipedia/commons/0/03/Lakenvelder_kalf.jpg" style="width:100%" onClick="onClick(this)" class="w3-hover-opacity" alt="image 2"></p> </div> <div id="id02" class="w3-modal"> <div class="w3-modal-content w3-card-4 w3-animate-zoom"> <header class="w3-container w3-center"> <span onclick="document.getElementById('id02').style.display='none'" class="w3-button w3-pink w3-xlarge w3-display-topright">×</span> <img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Lakenvelder_kalf.jpg" style="height:400px; width:400px;"> </header> <div class="w3-bar w3-border-bottom w3-pale-red"> <button class="tablink w3-bar-item w3-button" onclick="openProduct(event, 'Characteristics2')">Characteristics</button> <button class="tablink w3-bar-item w3-button" onclick="openProduct(event, 'Ingredients2')">Ingredients</button> <button class="tablink w3-bar-item w3-button" onclick="openProduct(event, 'Body Sugaring Pros2')">Pro's</button> </div> <div id="Characteristics2" class="w3-container product"> <h2>Modal 2.1</h2> <p>bla bla and bla.....</p> </div> <div id="Ingredients2" class="w3-container product"> <h2>Modal 2.2</h2> <p>did you just say bla bla???</p> </div> <div id="Body Sugaring Pros2" class="w3-container product"> <h2>Modal 2.3</h2> <p>No, I said mooo</p><br> </div> <div class="w3-container w3-pink w3-padding"> <button class="w3-btn w3-right w3-white w3-border" onclick="document.getElementById('id02').style.display='none'">Close</button> </div> </div> </div> </div> </div> <script> document.getElementsByClassName("tablink")[0].click(); function openProduct(evt, productName) { var i, x, tablinks; x = document.getElementsByClassName("product"); for (i = 0; i < x.length; i++) { x.style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < x.length; i++) { tablinks.classList.remove("w3-light-grey"); } document.getElementById(productName).style.display = "block"; evt.currentTarget.classList.add("w3-light-grey"); } </script> </body> </html>
-
Thank you for your reply. I gave each modal a unique id. Since the first one in the tutorial had 01, I just went on numbering till 08. The specific text for each modal is in the right place, and they all open just fine. I just want them all to open the same way. With the first tab open so you can see the text underneath ( like it opens in the tutorial, where one immediatly sees the text under London.) My first modal is ok, but the others open with all 3 tabs closed. Probably the script has to be adjusted, and that is something I'm not good at..... If someone can help me out there would be great
-
Hello, I’m trying to make a page with multiple tabbed modals. By doing this I use the w3schools tutorial: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_tab. I use pretty much the same code. I added 7 other tabbed modals, all identical to the first one with 3 tabs, but of course with different text . The problem I encounter is that only the first modal opens the right way like in the tutorial. The other modals all open with closed tabs and only show the text once you click it. I tried figuring out how to get all the modals opening with the first tab open, but found myself stuck. Any help would be highly appreciated!
-
Hello, Below is an example from w3schools of a transition. In this example the transition expands to the right. When you change width to height it goes downwards. Is it possible to make the slide/movement to the left or upwards in pure css? -------- <html> <head> <style> div { width:100px; height:100px; background:red; transition:width 2s; -webkit-transition:width 2s; /* Safari */ } div:hover { width:300px; } </style> </head> <body> <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> <div></div> <p>Hover over the div element above, to see the transition effect.</p> </body> </html> -------